As you’re scrolling through Apple’s iPhone landing page, a scrolling animation starts, page scrolling gets locked until the scroll animation is over (iPhone - Apple). Look for “All-screen makes all the difference” section.
How can I achieve this effect in Webflow?
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…
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:
…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
Has anyone had any luck with this? I have a lottie animation that is playing on scroll then once it reaches it’s sticky location, the lottie animation stops animating even though I am still scrolling. Would like to know how to keep the lottie animating while its stuck on the screen.
Any luck on this from anyone?