Component
3D Stacked Tower Spin Animation in Framer
This is a 3D stacked tower spin animation recreated in Framer, from Daniel’s work. Feel free to remix or copy the component to see how it all comes together in Framer.
Created by
About the resource
I started by creating a 3D layer with all sides, then stacked 12 of these layers on top of each other to build the full 3D tower setup. To get the right depth and movement during transitions, I applied perspective to the entire structure.
About the resource
I started by creating a 3D layer with all sides, then stacked 12 of these layers on top of each other to build the full 3D tower setup. To get the right depth and movement during transitions, I applied perspective to the entire structure.
About the resource
I started by creating a 3D layer with all sides, then stacked 12 of these layers on top of each other to build the full 3D tower setup. To get the right depth and movement during transitions, I applied perspective to the entire structure.
The 3D tower setup with stacked 3D layers on top of each other.
The 3D tower setup with stacked 3D layers on top of each other.
The 3D tower setup with stacked 3D layers on top of each other.
From there, I added variants by rotating the tower on the Y-axis—layer by layer. Each layer has its own transition override as well with a slight delay to create that smooth cascading, staggered spin effect.
In the third variant, the layers rotate 180 degrees. In the fourth, they rotate to 270. And in the fifth, they return to 0. The animation style changes depending on how you tweak the delay and timing settings in the transitions.
From there, I added variants by rotating the tower on the Y-axis—layer by layer. Each layer has its own transition override as well with a slight delay to create that smooth cascading, staggered spin effect.
In the third variant, the layers rotate 180 degrees. In the fourth, they rotate to 270. And in the fifth, they return to 0. The animation style changes depending on how you tweak the delay and timing settings in the transitions.
From there, I added variants by rotating the tower on the Y-axis—layer by layer. Each layer has its own transition override as well with a slight delay to create that smooth cascading, staggered spin effect.
In the third variant, the layers rotate 180 degrees. In the fourth, they rotate to 270. And in the fifth, they return to 0. The animation style changes depending on how you tweak the delay and timing settings in the transitions.
The five variants of the 3D tower for four spins.
The five variants of the 3D tower for four spins.
The five variants of the 3D tower for four spins.
