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

  • @tonyroslund
    @tonyroslund3 ай бұрын

    Daaaang! Super slick. Exactly what I was looking for, thanks for taking time to share. Subscribed!

  • @mubindidit230
    @mubindidit230 Жыл бұрын

    On-point and super helpful!

  • @AbdussalamPopoola
    @AbdussalamPopoola Жыл бұрын

    Great tutorial!

  • @KumailChangezi
    @KumailChangezi Жыл бұрын

    Great job!

  • @hectorwearden202
    @hectorwearden202 Жыл бұрын

    Cheers, well explained.

  • @Darkmanxdmx
    @Darkmanxdmx11 ай бұрын

    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!

  • @cosmictofu
    @cosmictofu Жыл бұрын

    great tutorial and easy to follow. Is there a way to have it scale from left to right instead of from the center?

  • @dsapio

    @dsapio

    Жыл бұрын

    Yes! Check out override #45 frameroverrides.com/5#overrides

  • @JohnKappaAU

    @JohnKappaAU

    Жыл бұрын

    Add a min Height to your 'Progress Bar' and 'Bar'

  • @tomwatson1625
    @tomwatson1625 Жыл бұрын

    Nice content! Can this be done vertically? Could you do it with positioning 'sticky'?

  • @dsapio

    @dsapio

    Жыл бұрын

    Yeah you could align this to the right or left of your container as well and set to scale on the Y-axis

  • @afzalux174
    @afzalux1745 ай бұрын

    Can it be done inside a component?

  • @rainivargas
    @rainivargas Жыл бұрын

    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

    @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

    @rainivargas

    Жыл бұрын

    @@dsapio Perfect - I might have missed that. Thank you so much! ❤