Hi Product Hunt Community! I'm happy to launch a beta version of CSS Animation Studio, an animation tool that I built recently! Originally, I'd wanted to build a simple animation repository similar to Animista except with more complicated animations such as ones on Codepen. I thought it'd be cool to build a UI that helps quickly customize different options of the animation and see the changes live before throwing it into a codebase. Then, I thought, what if I could edit the animation like a video timeline? So what should have been a simple NextJS exercise ballooned into an editing studio for animations. Currently, some of the supported features include: - A clickable and draggable timeline with a preview - Directly creating and shifting keyframes on the timeline - A drag and drop timing curve editor - The ability to directly modify the target's HTML and CSS - Export to CSS keyframes - Runs locally after initial load I'm excited to share CSS Animation Studio with everyone here and hope that you'll find the product helpful! I'd love to hear any feedback or if there's anything you'd like to see added in the future!

CSS Animation Studio

Visual editor for CSS animations and keyframes

Visual editor for CSS animations and keyframes