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

What is Framer? Join the Community
Return to index
Ricardo Pedroso
Posted Mar 27 - Read on Facebook

Hey guys!

First question: Is it possible to simulate the behaviour of the circular progress bar on Framer like on the image? I want to enter on a screen and do an animation like from 0 steps to 2000 steps...

Second question: I have a text layer on my prototype and I want to update its value every 10 seconds for example. Is it possible to do that?

Thank you!

12 Comments

Jordan Robert Dobson

Yep it's possible. It's mostly a math based thing.

Jordan Robert Dobson

First start by figuring out how you're going to control the animation... Is it from 0 to 2000 straight away?

Ricardo Pedroso

Yes, just like that. With a linear animation...

Ricardo Pedroso

Actually I'm thinking about use an external circular progress/chart library instead of doing all the work. Do you know any libraries that I can import and use inside the prototype?

Florian Pnn

You can do the progress animation with a simple SVG, look at SVG animation for front-end it will give you a lead ;)

Jordan Robert Dobson

I'll have an example for you in a few more minutes.

Jordan Robert Dobson

http://jrdn.io/0h363v0b2z0p

This should be what you need. If you also need the dial I could work that up too.

Jordan Robert Dobson

I updated the link above.

Jordan Robert Dobson

http://jrdn.io/2s0g35151p1L

This should be somewhat close to what you are looking for.

Jordan Robert Dobson

Is this what you were trying to do essentially?

David Ross

That looks really sweet!

JL Flores Mena

"Utils.domComplete ->"
what?! I need to go into the dark side of the engine to find these tricks.
Thanks for sharing Jordan

Read the entire post on Facebook