Streaming live at 10am (PST)

Stop page scrolling while animation scrolling is in process

As you’re scrolling through Apple’s iPhone landing page, a scrolling animation starts, page scrolling gets locked until the scroll animation is over (https://www.apple.com/iphone-xs/). Look for “All-screen makes all the difference” section.

How can I achieve this effect in Webflow?

3 Likes

Hello, Im exactly looking into that and I can’t find anything.
Im using Lottie Animation but I can’t find the trigger configuration to stop page scrolling when my animation is scrolling into the viewport.
I would like my background stay fix until scrolling animation is finished.

Thank you a lot for your help.

1 Like

I am going to test this , this week. I was told it could be established by first setting the Div to ‘fixed’ and set the pixels from what point it should be fixed. and then you can add the animation with scroll into view…

2 Likes

Hello Fleur_123, did you succeed ? I’m also trying to get this result but didn’t get it yet.

Any luck on this? Im looking for the same effect - locked viewport while scrolling through an animation and then unlock scrolling as you keep going.

Cant figure out how to get the scrolling to lock.

A good example of this effect:
https://www.joinstring.com/

…I tried copying a page (that I can’t find anymore)

this is the result: (Test version)
https://preview.webflow.com/preview/fleura?utm_medium=preview_link&utm_source=designer&utm_content=fleura&preview=2c46e7c09b5bcf884f3c0d5b5b062395&pageId=5faad809b2bb775498f9b850&mode=preview

1 Like