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.
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.
Three steps highlighted with blue, cyan, and deep purple.
Three steps highlighted with blue, cyan, and deep purple.
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.
Revealing the hidden text layers in each step.
Revealing the hidden text layers in each step.
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 text layers.
The scroll transform effect applied to the text layers.
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.
