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?

2 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.

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…

1 Like