About The Resource

This no-code scroll animation demo utilizes the tried-and-true technique of using sticky positioning with trigger frames.

I've touched on this in some of my YouTube tutorials. For example, you can check out one here where I recreate a scroll animation from the Apple Watch website.

The idea behind this technique is to create a 'sticky' section that remains visible as we scroll down the site — in this case, it's the container with all the background images. Then we put in trigger frames and add scroll sections to them. These trigger frames actually scroll over the 'sticky' section as we navigate the site. This is how we're able to activate scroll transforms with them (using scroll section triggers) and manipulate the layers within our sticky container.

As you can see in the layers panel, layers marked with a little "*" have scroll transforms, while those marked with a little "#" feature scroll sections.