This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Caleb Kingston
Posted Jun 27 - Read on Facebook

Can anyone help direct me to a tutorial that would show me how to animate something like this in framer? I'm quite new. I've taken about 7 hours in courses so far but I want to try this out to see if I can replicate it (and improve the arrow animation) but my biggest challenge, I think, is going to be the organic circular movement of the progress circle.

4 Comments

Steve Ruiz

Framer isn't the best tool for creating complex animations. I would explore other software options for making SVG animations, then bring those animations into Framer to fit with the rest of your interface.

Amos Gyamfi

Hi, you can create that easily in Kite. Check it out: https://kiteapp.co/

JL Flores Mena

Others have mentioned good alternatives here. I want to share another one: Bodymovin. It's a free plugin for AfterEffects.

Working with SVGs is complicated, I'd still encourage you to read and learn about SVG Animations and GreenSock's GSAP set of plugins. But Bodymovin will let you create these animations without touching code.

You can then import the animation (a JSON file) into Framer. I created a module that makes this step super easy. Check it out and let me know if you hit a blocker https://github.com/72/bodymovin-for-Framer

Read the entire post on Facebook