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

What is Framer? Join the Community
Return to index
Christie Day
Posted Sep 12 - Read on Facebook

hi all! I'm brand new to framer and have a few questions.Oddly enough, what seems to be the simplest part of the prototype is giving me the most difficulty.

I am trying to animate a progress bar that moves from left to right over the timeframe of 15 seconds. There is a series of 3 pages in my page component and this progress bar would exist on each of the three pages and last only 15 seconds before automatically moving to the next page.

Can anyone point me in the direction of some documentation on how to do this? or have any advice on how to do this?

Thanks in advance :)

1 Comments

Andreas Wahlström

Hi! I would try using the sliderComponent for the progress bars: http://blog.framerjs.com/posts/prototype-advanced-sliders-in-seconds.html

You should be able to increment the value of the sliders each second by using the Utils.interval method. For each interval, check the value and see if it has reached 100% of the slider. Then tell the page component to snap the next page. Also, you might need to clear your intervals after they've reached 15s.

Hopefully that should get you started! Let us know how it goes!

Read the entire post on Facebook