3D Staircase Scroll Animation in Framer

3D Staircase 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 Staircase Scroll Animation in Framer

This is a 3D staircase text scroll animation in Framer, recreated from Dee Spooner's original design. Feel free to remix this project to see how something like this can be created in Framer without writing any code.

image of Nandi Muzsik
profile image of Dee Spooner
image of Prianca S.

Created by

3D Staircase Scroll Animation in Framer
3D Staircase Scroll Animation in Framer
3D Staircase Scroll Animation in Framer
Framer 3D Transforms for Beginners (Crash Course)

Related Lesson

Framer 3D Transforms for Beginners (Crash Course)

Framer 3D Transforms for Beginners (Crash Course)

Related Lesson

Framer 3D Transforms for Beginners (Crash Course)

Framer 3D Transforms for Beginners (Crash Course)

Related Lesson

Framer 3D Transforms for Beginners (Crash Course)

About the resource

The most important feature I have to use in Framer to create a 3D scroll animation like this is 3D transforms. We can use it to project any layer in 3D space.

For the scroll animation part, I use the easiest scroll animation technique, which involves using sticky positioning to keep a frame in view while we scroll down the page, and transform the elements within that frame with scroll transforms. You can learn all about this technique in this video.

Structure

You might think that we literally move the texts through a 3D staircase, but in reality, it's an illusion. What we do instead is create 3 frames, one for each step of the staircase, where each "Step Frame" contains all the needed text layers. So in reality, we have all text layers (Branding, Naming, Strategy, Packaging, 3D Visuals, Website) 3 times within this website. We just always show the right one to create the illusion.

About the resource

The most important feature I have to use in Framer to create a 3D scroll animation like this is 3D transforms. We can use it to project any layer in 3D space.

For the scroll animation part, I use the easiest scroll animation technique, which involves using sticky positioning to keep a frame in view while we scroll down the page, and transform the elements within that frame with scroll transforms. You can learn all about this technique in this video.

Structure

You might think that we literally move the texts through a 3D staircase, but in reality, it's an illusion. What we do instead is create 3 frames, one for each step of the staircase, where each "Step Frame" contains all the needed text layers. So in reality, we have all text layers (Branding, Naming, Strategy, Packaging, 3D Visuals, Website) 3 times within this website. We just always show the right one to create the illusion.

About the resource

The most important feature I have to use in Framer to create a 3D scroll animation like this is 3D transforms. We can use it to project any layer in 3D space.

For the scroll animation part, I use the easiest scroll animation technique, which involves using sticky positioning to keep a frame in view while we scroll down the page, and transform the elements within that frame with scroll transforms. You can learn all about this technique in this video.

Structure

You might think that we literally move the texts through a 3D staircase, but in reality, it's an illusion. What we do instead is create 3 frames, one for each step of the staircase, where each "Step Frame" contains all the needed text layers. So in reality, we have all text layers (Branding, Naming, Strategy, Packaging, 3D Visuals, Website) 3 times within this website. We just always show the right one to create the illusion.

the three steps of the animation structure

Three steps highlighted with blue, cyan, and deep purple.

the three steps of the animation structure

Three steps highlighted with blue, cyan, and deep purple.

the three steps of the animation structure

Three steps highlighted with blue, cyan, and deep purple.

You can see in the image above that each step is transformed in 3D space using the 3D rotation feature in Framer. You can also notice that only one text layer is shown in each step.

But in reality, as I said, each step contains all the needed text layers. We just don't see them because the overflow is set to hidden.

You can see in the image above that each step is transformed in 3D space using the 3D rotation feature in Framer. You can also notice that only one text layer is shown in each step.

But in reality, as I said, each step contains all the needed text layers. We just don't see them because the overflow is set to hidden.

You can see in the image above that each step is transformed in 3D space using the 3D rotation feature in Framer. You can also notice that only one text layer is shown in each step.

But in reality, as I said, each step contains all the needed text layers. We just don't see them because the overflow is set to hidden.

showing the hidden text layers

Revealing the hidden text layers in each step.

showing the hidden text layers

Revealing the hidden text layers in each step.

showing the hidden text layers

Revealing the hidden text layers in each step.

We apply the same scroll transform to each of the text layers within the steps, and move them to the top by adjusting the offset Y value.

We apply the same scroll transform to each of the text layers within the steps, and move them to the top by adjusting the offset Y value.

We apply the same scroll transform to each of the text layers within the steps, and move them to the top by adjusting the offset Y value.

the scroll transform effect applied to the texts

The scroll transform effect applied to the text layers.

the scroll transform effect applied to the texts

The scroll transform effect applied to the text layers.

the scroll transform effect applied to the texts

The scroll transform effect applied to the text layers.

As this scroll transform effect is triggered, each of the text layers in all steps will start moving at the same time, creating the illusion of texts running through a 3D staircase.

To understand a bit more about the structure of this animation, check out the video below to see how it looks if we don't hide the overflowing text layers within the middle step.

As this scroll transform effect is triggered, each of the text layers in all steps will start moving at the same time, creating the illusion of texts running through a 3D staircase.

To understand a bit more about the structure of this animation, check out the video below to see how it looks if we don't hide the overflowing text layers within the middle step.

As this scroll transform effect is triggered, each of the text layers in all steps will start moving at the same time, creating the illusion of texts running through a 3D staircase.

To understand a bit more about the structure of this animation, check out the video below to see how it looks if we don't hide the overflowing text layers within the middle step.

Scroll transform in action, without hiding the overflowing texts in the middle step.

Scroll transform in action, without hiding the overflowing texts in the middle step.

Scroll transform in action, without hiding the overflowing texts in the middle step.

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

  • Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

    Apple TV Scroll Zoom Animation in Framer

    Apple TV Scroll Zoom Animation in Framer

    Animation

  • New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation

    New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation

    New Apple Slider Component in Framer

    New Apple Slider Component in Framer

    Animation