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.
Nice writeup, Henrique. Good example of proxy to control animation.
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/
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:
Here's a pie chart example of mine using this technique as well. Basically just set the line width double the radius. :D
hi, i want to know how to import "snap.svg-min.js" into framer,thank u!
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!
Hi Katya, if you are using Josh Puckett's module SVGLayer, each layer comes with a direction property, which will help you do this.