PureAnim

Create Web Animations for Any Framework!

127 followers

Create Web Animations for Any Framework!

127 followers

Visit website

3D & Animation

•

No-code Platforms

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.

Free

Launch tags:No-Code

Launch Team

Unblocked — Get AI agents to generate code that fits your system.

Get AI agents to generate code that fits your system.

Promoted

Figma Icons

Maker

📌

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...

Report

1yr ago

This looks really cool but I can't get it to work. How do you preview the animation before downloading?@sebiko_studio

Report

1yr ago

Figma Icons

Maker

@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.

Report

1yr ago

@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

Report

1yr ago

Figma Icons

Maker

@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!

Report

1yr ago

@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 🥳

Report

1yr ago

Great job, I tested it with some SVG and interface is really intuitive and polished. Instant bookmark for me :)

Report

1yr ago

Figma Icons

Maker

@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.

Report

1yr ago

Figma Icons

Maker

Hey everyone! Thank you so much for all the upvotes—it really motivates me to keep improving the app. I’m excited to share a new update: - Added Ease Presets and Custom Bezier Curves for better control. - Beta Feature: Export animations to GSAP by Webflow. - Highlighted active properties on the timeline to make editing quicker and easier. Thanks again for the support, and I can’t wait to hear what you think! Which new feature are you most excited about?

Report

1yr ago1 Answer

Figma Icons

Maker

🚀 Big Updates for PureAnim! 🎉 Just launched two exciting new features to make animation creation even smoother: 1️⃣ Active Layers Panel – Easily find and edit the right layer or keyframe! All your animated layers are now in one panel. Just click, and it’s instantly active in the viewport—quick and effortless. 2️⃣ Full Project Export – Export your entire project (animations + SVG files) into a single JSON file. You can re-upload it anytime to restore your work exactly as it was. No more worrying about losing progress! I’d love to hear your thoughts! Drop an upvote and let me know which feature you want next by clicking the Feedback button in the app. Let’s build this together! 💡 Feedback: https://pureanim.netlify.app/fee...

Report

1yr ago

Poppins

would love to try it out-do you have an enterprise version?

Report

1yr ago

Figma Icons

Maker

@mishra_mayank What do you mean by the enterprise version?

Report

1yr ago

Wow, PureAnim looks like a game-changer for creating web animations! 🎉 Congrats to the team on this awesome no-code tool. Can't wait to see the cool animations people will create with it. What's your favorite feature so far?

Report

1yr ago

SnapShot

look superb all the best buddy

Report

1yr ago