Controlled Scroll Animation

Hi everyone,
Back here again with an interaction related question!

I’m trying to achieve a controlled scroll interaction, similar to something you see on the homepage. You can see how while scrolling, when you reach a certain section, the animation begins, and you are able to scroll past that section only once the animation is complete. Until then, you stay on that section and watch the entire animation take place as you scroll. If you scroll back up, the animation reverses. That’s exactly what I’m trying to achieve.

Another example is:
The second section there is pretty much what I’m trying to learn how to recreate.

I’ve brainstormed over this for a few hours now and did a little bit of research. Was eventually able to come across this topic: Scroll Controlled Animation

The person in the above forum post inquired about the exact same thing that I’m trying to learn/achieve, and while it does seem that the question was answered, I’m too dumb to make anything out of it. Would anyone be kind enough to help me out with this?

Thank you!

Here’s a link of the published site:
And a read-only link:

You can check this demo and clone it:

Hi Vincent,
Thanks a lot for your reply.

Correct me if I’m wrong, so what I have to do is perhaps
(1) create a horizontal scroll,
(2) place an element inside with ‘absolute’ position from top,
(3) then add a “while scrolling in view” interaction to the element?

So that the element stays and animates right there as the user scrolls, and the animation ends as the horizontal scroll nears its end. Or am I getting it all wrong? Sorry if this sounded dumb :smile:

I figured it out! Thank you very much for the base idea Vincent. I feel proud all of a sudden, look what I just made :slight_smile:

1 Like

That’s perfect, you can be proud, it’s an advanced piece of UX and you mastered it! Looks awesome.

Don’t forget to set the smoothing! Try 75-85%.

Hey @aditya1

What you did looks amazing! Do you mind sharing what you did there to achieve it?

I’m looking to create a sticky interaction where and image in the middle of the screen changes as you scroll with a fade out effect. @vincent your genius would be much appreciated here too!

Thanks in advance,

1 Like