Animation
Sticky Section Scroll Animation in Framer
This is a Framer recreation of the fabulous scroll animation from the Analogue Agency website. Feel free to remix this project and explore how you might put together something like this in Framer, without any coding.
Created by
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.
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.
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.
Scroll animation layer structure in Framer.
Scroll animation layer structure in Framer.
Scroll animation layer structure in Framer.
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.
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.
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.
