About The Resource

This demo is using the good old technique of sticky positioning and scroll transforms.

I explained this technique in detail in this YouTube video where I recreated a scroll animation from the VRTLWRLD website.

The main concept behind this approach is to create a 'sticky' section that remains visible as we scroll on the website. In our case, this section includes the phone mockup. By adding trigger frames and linking them to scroll sections, these triggers move alongside the 'sticky' section as we scroll down. This setup allows us to activate scroll transforms (using scroll section triggers) and adjust the elements within our sticky box.

In the image above, you can observe that we are applying a scroll transform to the screen. The "from" state is at "1" opacity and "1" scale, while the "to" state involves a basic Y offset, causing the image to animate towards the top. This process creates the scrolling effect on the phone screen.