Streaming live at 10am (PST)

Page Scroll Lottie Animation


I was wondering how I can make a page scroll indicator like this one: https://mst.agency/philosophy

Is there a way to make the lottie animation only play a portion for each page or do I have to split it up and play it individually per page.


Hi @brendonson

If you are talking about the three dots on the left handside that fill in as you scroll down - you don’t even need a lottie to do it - this can be achieved with a “scroll triggered” interaction (that has two divs (one outline and one with fill) and the fill one scales from 1 to 100% on trigger).

If you would like to have a lottie to do it, it is also possible since you can control the frame start frame end of animation and its duration, with a scroll triggered lottie interaction.

Hope that helps

1 Like

That’s definitely a smart way to do it! I have to make a dot for each dot though right?

which way are you talking about - with lottie or without? because with regular interaction you just make one dot (which will consist of two divs one with a border and one with fill) and then copy them

1 Like

could you make this example and give a link to the site so that I can see how to make side points when we switch to sections. I’m new, it’s hard to figure out

Here you go…

I put it together quickly but you can refine it as needed…

1 Like

thank you for the link!