Animation
3D Stacked Scroll Animation in Framer
This is a 3D stacked scroll animation recreated in Framer, from the forgeandform website. I used scroll transforms to create the illusion of layers stacking in and out as you scroll through the page. You can remix the project to see how it’s structured and tweak the effect to suit your own designs.
About the resource
To create the 3D stacked scroll animation, I used sticky positioning for the frames and added scroll transforms like rotation, scale and perspective for a layered effect. The frames dynamically shift in space as you scroll, creating depth and movement. If you want to learn more about 3D transform in Framer, you can watch my full crash course on it.
About the resource
To create the 3D stacked scroll animation, I used sticky positioning for the frames and added scroll transforms like rotation, scale and perspective for a layered effect. The frames dynamically shift in space as you scroll, creating depth and movement. If you want to learn more about 3D transform in Framer, you can watch my full crash course on it.
About the resource
To create the 3D stacked scroll animation, I used sticky positioning for the frames and added scroll transforms like rotation, scale and perspective for a layered effect. The frames dynamically shift in space as you scroll, creating depth and movement. If you want to learn more about 3D transform in Framer, you can watch my full crash course on it.
The scroll transform effect applied on the images.
The scroll transform effect applied on the images.
The scroll transform effect applied on the images.
For the text animation, I used a scroll variant effect to show and hide the text at specific scroll points, syncing its transitions seamlessly with the overall animation. The key concept here is that the scroll animations are triggered within the sticky positioned frame, by using hidden trigger sections.
For the text animation, I used a scroll variant effect to show and hide the text at specific scroll points, syncing its transitions seamlessly with the overall animation. The key concept here is that the scroll animations are triggered within the sticky positioned frame, by using hidden trigger sections.
For the text animation, I used a scroll variant effect to show and hide the text at specific scroll points, syncing its transitions seamlessly with the overall animation. The key concept here is that the scroll animations are triggered within the sticky positioned frame, by using hidden trigger sections.
The scroll transform effect triggered with scroll sections.
The scroll transform effect triggered with scroll sections.
The scroll transform effect triggered with scroll sections.
So basically to do that I keep the images and text in a sticky frame at the top of the site and as I scroll down, I use trigger frames with scroll sections to trigger the images for the scroll effect. If you want to learn more about how to work with sticky and trigger frames, watch this lesson.
So basically to do that I keep the images and text in a sticky frame at the top of the site and as I scroll down, I use trigger frames with scroll sections to trigger the images for the scroll effect. If you want to learn more about how to work with sticky and trigger frames, watch this lesson.
So basically to do that I keep the images and text in a sticky frame at the top of the site and as I scroll down, I use trigger frames with scroll sections to trigger the images for the scroll effect. If you want to learn more about how to work with sticky and trigger frames, watch this lesson.
The trigger frames within sticky frame in Framer.
The trigger frames within sticky frame in Framer.
The trigger frames within sticky frame in Framer.
