3D Stacked Tower Spin Animation in Framer

Copy component

3D Stacked Tower Spin Animation in Framer

Copy component

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

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.

image of Nandi Muzsik
image of Prianca S.
Image of Daniel

Created by

,

and

Stacked text blocks reading 'FRAMER IS GOOD' arranged in a spiraling vertical tower, transitioning from white to black as they descend
Stacked text blocks reading 'FRAMER IS GOOD' arranged in a spiraling vertical tower, transitioning from white to black as they descend
Stacked text blocks reading 'FRAMER IS GOOD' arranged in a spiraling vertical tower, transitioning from white to black as they descend

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.

Framer interface showing a vertical stack of 'FRAMER IS GOOD' text layers with 3D transform applied. A side panel displays transform settings with perspective set to 1200 and 'Preserve' enabled

The 3D tower setup with stacked 3D layers on top of each other.

Framer interface showing a vertical stack of 'FRAMER IS GOOD' text layers with 3D transform applied. A side panel displays transform settings with perspective set to 1200 and 'Preserve' enabled

The 3D tower setup with stacked 3D layers on top of each other.

Framer interface showing a vertical stack of 'FRAMER IS GOOD' text layers with 3D transform applied. A side panel displays transform settings with perspective set to 1200 and 'Preserve' enabled

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.

Five vertically stacked text columns each displaying 'FRAMER IS GOOD' repeatedly. Each stack is labeled 'Default – Primary', 'Spin 1', 'Spin 2', 'Spin 3', and 'Spin 4', showcasing variations in background color and potential 3D rotation effects within a Framer design interface

The five variants of the 3D tower for four spins.

Five vertically stacked text columns each displaying 'FRAMER IS GOOD' repeatedly. Each stack is labeled 'Default – Primary', 'Spin 1', 'Spin 2', 'Spin 3', and 'Spin 4', showcasing variations in background color and potential 3D rotation effects within a Framer design interface

The five variants of the 3D tower for four spins.

Five vertically stacked text columns each displaying 'FRAMER IS GOOD' repeatedly. Each stack is labeled 'Default – Primary', 'Spin 1', 'Spin 2', 'Spin 3', and 'Spin 4', showcasing variations in background color and potential 3D rotation effects within a Framer design interface

The five variants of the 3D tower for four spins.

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

  • Scroll animation with still life and interior images

    3D Scrolling Paper Images for Framer

    Component

    Scroll animation with still life and interior images

    3D Scrolling Paper Images for Framer

    Component

    Scroll animation with still life and interior images

    3D Scrolling Paper Images for Framer

    Component

  • Text animation displaying the phrase 'Framer is a design tool that makes' with the word 'makes' in blue and a vaporizing particle effect erasing the following word on a dark background

    Vaporize Text Cycle Component for Framer

    Component

    Text animation displaying the phrase 'Framer is a design tool that makes' with the word 'makes' in blue and a vaporizing particle effect erasing the following word on a dark background

    Vaporize Text Cycle Component for Framer

    Component

    Text animation displaying the phrase 'Framer is a design tool that makes' with the word 'makes' in blue and a vaporizing particle effect erasing the following word on a dark background

    Vaporize Text Cycle Component for Framer

    Component