Pure Anim is a no-code CSS keyframe SVG animation tool. It lets users control keyframes visually and exports animations in various formats, including CSS, JSON, and GSAP, with more formats on the way.
I grew tired of software becoming increasingly paywalled, so I decided to build something for creators and web/product developers: a no-code CSS keyframe tool. It goes back to basics, letting you control your CSS with a visual animation editor. I promise to keep it simple. Since I’m still figuring out if people need this, I’d appreciate it if you could take a 30-second survey!
Survey: https://pureanim.netlify.app/fee...
@mark_townsend1 👋 The animation preview is located above the timeline, at the center of the app. Once you upload an SVG file and adjust the keyframes, the animation should play instantly. The app has been tested on both Chrome and Safari, so if you encounter any issues with the animation not displaying, please share the details with me.
@sebiko_studio Thanks for your reply. I'm probably missing something really basic but I'm proficient with photoshop and final cut so I thought I'd be able to figure it out but still no luck. I've tried different svg files from different sources and different browsers (chrome, safari, opera) but I can't see any animation. I follow the same steps in the video you posted (upload, select layer, rotate from center origin etc.) but I get nothing. It's probably something really obvious I'm missing but it's bugging me like crazy lol
@mark_townsend1 Hi! Did you add more than one keyframe to a layer? Similar to After Effects or Lottie Editor, you’ll need at least two keyframes to make it work. I’ve made another video explaining the new features, including Custom Bezier Curves for easing transitions—maybe that will help!
Also, can you confirm if the SVG preview appears after you upload it? If you're still having trouble, could you share a short screen recording of the issue? Your feedback would be super helpful. If it’s unclear how to set keyframes, I might add an onboarding guide to the app.
If you'd like, we could also have a quick 1:1 call to go over everything. Let me know—your feedback has been incredibly valuable!
@sebiko_studio Success!!!🎉🎉🎉 Yes I was adding multiple keyframes and I could see a static preview of the SVGs I uploaded. The mistake I was making was not adding the value denomination in the field as well. For example, instead of entering in "45px" or "45deg" I was just entering "45". This is the behaviour I'm used to from other programs like photoshop and final cut. It would be great to add this feature. Thanks for your help 🥳
@tymzap Thank you so much! I'm really glad to hear that! I'm preparing to release a new update either today or tomorrow, which will include custom ease bezier curves and the ability to export to JS libraries like GSAP. Lottie export may be available soon as well.
Thanks! Let me know if there is anything left that could improve your experience with the app!
Stay tuned for more product updates - Just released new beta feature allowing animating objects on Paths! I would appreciate any early feedback. Best, Seb
Figma Icons
Figma Icons
Figma Icons
Figma Icons
Poppins
Figma Icons