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

What is Framer? Join the Community
Return to index
Henrique Gusso
Posted May 16 - Read on Facebook

I know we've seen this prototyped and discussed extensively here, but I felt there was still room for organising the ideas behind animating a circular path in writing.

So there you go, a Medium post about creating a circular progress bar in Framer. Thanks to many of you for all the investigation that led to the techniques we're all using today.

9 Comments

Stephen Crowley

Nice writeup, Henrique. Good example of proxy to control animation.

Veronica Jimenez-Miller

Awesome article!

Jorn van Dijk

Super nice!

Florian Pnn

I worked on something really similar for pie chart. I use the same way to animate but the drawing in SVG is a bit trickier : http://share.framerjs.com/fn1l7lxe09t3/

Jordan Robert Dobson

This looks like your example was based off some code I used for a helping Ricardo Pedroso with a gauge prototype. Thanks for documenting it! I also wanted to show you two other things I was working on for creating some motion blur:

http://jrdn.io/fZDq

http://jrdn.io/fZZL

Jordan Robert Dobson

Here's a pie chart example of mine using this technique as well. Basically just set the line width double the radius. :D

http://jrdn.io/fZEx

陈鹏

hi, i want to know how to import "snap.svg-min.js" into framer,thank u!

Katya Kostyukova

Hi Henrique, great post on medium, super helpful. I also have a question, how could I easily change the direction and the start point of animation? Here is my prototype: http://share.framerjs.com/1gukr4c0fnav/ What I am trying to do, is to start the second full circle (blue progress bar) from the top and not the bottom. Would very much appreciate your advice. Thanks!

Sindu Narasimhan

Hi Katya, if you are using Josh Puckett's module SVGLayer, each layer comes with a direction property, which will help you do this.

Read the entire post on Facebook