Framer / How to Create a Progress Bar Triggered by Scroll
Using Framer, let's create a progress indicator that is triggered by scroll position. When you reach the bottom of the section your progress bar will fill the screen.
To remix: framer.com/projects/new?dupli...
Пікірлер: 15
Daaaang! Super slick. Exactly what I was looking for, thanks for taking time to share. Subscribed!
On-point and super helpful!
Great tutorial!
Great job!
Cheers, well explained.
Hey Danny, thank you so much for this. Super, super helpful! Question: My blog posts are divided into multiple sections, not only 1 as you present in your tutorial. Is there any workaround for that to make the progress happen? Thanks a ton!
great tutorial and easy to follow. Is there a way to have it scale from left to right instead of from the center?
@dsapio
Жыл бұрын
Yes! Check out override #45 frameroverrides.com/5#overrides
@JohnKappaAU
Жыл бұрын
Add a min Height to your 'Progress Bar' and 'Bar'
Nice content! Can this be done vertically? Could you do it with positioning 'sticky'?
@dsapio
Жыл бұрын
Yeah you could align this to the right or left of your container as well and set to scale on the Y-axis
Can it be done inside a component?
Thank you for this extremely helpful video! For some reason, my bar starts off super thin (like hairline thin) and then increases in height as the page scrolls. It didn't maintain the height / thickness like yours did. Is there a way to fix this?
@dsapio
Жыл бұрын
Thanks for the kind words! If you watch the part again when I make the progress bar, I put it inside of another container and make it larger than it’s parent container to avoid the issue you’re mentioning
@rainivargas
Жыл бұрын
@@dsapio Perfect - I might have missed that. Thank you so much! ❤