Framer / How to Create a Progress Bar Triggered by Scroll
HTML-код
- Опубликовано: 9 сен 2024
- 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/pro...
Daaaang! Super slick. Exactly what I was looking for, thanks for taking time to share. Subscribed!
this is very simple ........... plz go to style and click + icon then show strock then choose strock color and remove feel color . then problem is solved .
On-point and super helpful!
Cheers, well explained.
Great tutorial!
Great job!
great tutorial and easy to follow. Is there a way to have it scale from left to right instead of from the center?
Yes! Check out override #45 frameroverrides.com/5#overrides
Add a min Height to your 'Progress Bar' and 'Bar'
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!
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?
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
@@dsapio Perfect - I might have missed that. Thank you so much! ❤
Nice content! Can this be done vertically? Could you do it with positioning 'sticky'?
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?