Animation
Dynamic Squares Scroll Animation in Framer
This is a squares scroll animation recreated in Framer, as seen on Lineage’s site. Feel free to remix the project to explore how you can create this layered scaling effect with scroll transform in Framer, without any code.
Created by
About the resource
To recreate the squares scroll animation, I started by placing a few square frames inside a sticky frame, this keeps them fixed in place while the scroll effects happen in the background. Then, I used scroll transforms to make the squares scale up as you scroll. I set up three scroll section trigger frames so that with each section, the squares scale up again, creating a layered sense of motion and depth.
Alongside the squares, the text layers are also animated using scroll transforms, so they move and change in sync with the squares as you scroll. The sticky frame makes sure everything stays centered and visible while the hidden trigger sections pass by, smoothly activating each transition for that continuous, fluid scrolling effect.
About the resource
To recreate the squares scroll animation, I started by placing a few square frames inside a sticky frame, this keeps them fixed in place while the scroll effects happen in the background. Then, I used scroll transforms to make the squares scale up as you scroll. I set up three scroll section trigger frames so that with each section, the squares scale up again, creating a layered sense of motion and depth.
Alongside the squares, the text layers are also animated using scroll transforms, so they move and change in sync with the squares as you scroll. The sticky frame makes sure everything stays centered and visible while the hidden trigger sections pass by, smoothly activating each transition for that continuous, fluid scrolling effect.
About the resource
To recreate the squares scroll animation, I started by placing a few square frames inside a sticky frame, this keeps them fixed in place while the scroll effects happen in the background. Then, I used scroll transforms to make the squares scale up as you scroll. I set up three scroll section trigger frames so that with each section, the squares scale up again, creating a layered sense of motion and depth.
Alongside the squares, the text layers are also animated using scroll transforms, so they move and change in sync with the squares as you scroll. The sticky frame makes sure everything stays centered and visible while the hidden trigger sections pass by, smoothly activating each transition for that continuous, fluid scrolling effect.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
The scroll transform effect in Framer.
