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

What is Framer? Join the Community
Return to index
Karl Goldstraw
Posted Mar 03 - Read on Facebook

Hello, I'm brand new to Framer. How do I add a percentage count-up to a horizontal progress bar that I'm animating on page load? I've been reading about event listeners but I'm unsure how to implement it. Here's my first prototype!



Jonas Treub

Hi Karl! Since you are animating the scaleX property of the progress indicator, its best to use that value to determine the percentage. You can listen for scaleX changes using the onChange() method on a layer. Inside the update function you can multiply the scaleX (going from 0 to 1) with 100, to get the percentage. Lastly you'll probably want to round the value to get a nice number to display.

Karl Goldstraw

Hi Jonas, that is so very helpful, thank you. I will open up your file and learn! Thank you!

Read the entire post on Facebook