Viewport locks as you are scrolling through a certain section with an animation

Im looking to achieve this effect:

  • Where the viewport locks as you are scrolling through a certain section with an animation.

For example, when you get to the section of an iphone with texts sliding out in both directions(left and right) , the viewport remains fixed with the entire animation in full view even as you are still scrolling down the page (for this animation you can notice how as you scroll, the scroll bar is progressing down, even while the animation is being kept locked in the viewport).

In other words- the animation boundaries are not cut off for the entire duration of scrolling through the animation. The animation appears to be locked to the center of the screen even as you scrolling through the section. When you reach the end of the section with the animation, the page continues scrolling as normal again.

I wondering how to achieve this scroll based effect on an animation with locking the animation in the center of the viewport while scrolling but only for that section with the animation.

Im starting to wonder if in reality its not the section thats being locked with 100% vh but instead the animation is moving down with the page as you scroll with its position perfectly synced to the scroll so it appears as if the viewport is locked.

In either case would really appreciate advice on how to achieve this effect.

Hi Dan,

there are quite a few projects of apple site rebuilds to be found on the webflow showcase.

Take a look on their approach:

https://webflow.com/website/AirPods-Pro-Website

Some of them are cloneable too.

I hope this helps you getting started.

1 Like