3D Stacked Scroll Animation in Framer

3D Stacked Scroll Animation in Framer

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

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.

image of Nandi Muzsik
image of Prianca S.

Created by

3D stacked images showcasing realism and motion effects
3D stacked images showcasing realism and motion effects
3D stacked images showcasing realism and motion effects

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.

3D stacked image with dynamic scroll perspective effect

The scroll transform effect applied on the images.

3D stacked image with dynamic scroll perspective effect

The scroll transform effect applied on the images.

3D stacked image with dynamic scroll perspective effect

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.

Scroll Transform UI with multiple section effects and spring transition

The scroll transform effect triggered with scroll sections.

Scroll Transform UI with multiple section effects and spring transition

The scroll transform effect triggered with scroll sections.

Scroll Transform UI with multiple section effects and spring transition

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.

Scroll container structure with sticky elements and triggers

The trigger frames within sticky frame in Framer.

Scroll container structure with sticky elements and triggers

The trigger frames within sticky frame in Framer.

Scroll container structure with sticky elements and triggers

The trigger frames within sticky frame in Framer.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • 3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

    3D-rendered early access ticket with gradient blue design

    Floating 3D Ticket in Framer

    Animation

  • Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation

    Learn to turn ideas into stunning websites text over 3D logo on dark background

    3D Logo Animation Website in Framer

    Animation