Component
3D Depth Card Stack Animation in Framer
This is a 3D Depth Card Stack Animation recreated in Framer from Rndr Realm’s original work. It uses layered depth, smooth flips, and image transitions to create a stunning visual effect. Feel free to remix the project or drop the component straight into your own.
Created by
About the resource
To create this 3D Depth Card Stack animation in Framer, I started by stacking 7 image cards together and applied a 3D transform to the main stack layer so everything sits in 3D space.
I spaced the cards using depth — the middle card stays centered, with three cards pushed back and three pulled forward. I set the middle card’s opacity to 0.3 and gradually increased it to 1 across the front and back cards — this made the layer separation more visible.
Next, I added variants that rotate the stack — first along the Y-axis, then adding X-axis rotation. With each 180° flip, the card images switch to a new set.
To keep the loop smooth, I made the last variant the same as the first and used an appear interaction with an instant transition back to default. The rest of the variants are linked with appear interactions using ease-in and ease-out transitions for a clean flow.
About the resource
To create this 3D Depth Card Stack animation in Framer, I started by stacking 7 image cards together and applied a 3D transform to the main stack layer so everything sits in 3D space.
I spaced the cards using depth — the middle card stays centered, with three cards pushed back and three pulled forward. I set the middle card’s opacity to 0.3 and gradually increased it to 1 across the front and back cards — this made the layer separation more visible.
Next, I added variants that rotate the stack — first along the Y-axis, then adding X-axis rotation. With each 180° flip, the card images switch to a new set.
To keep the loop smooth, I made the last variant the same as the first and used an appear interaction with an instant transition back to default. The rest of the variants are linked with appear interactions using ease-in and ease-out transitions for a clean flow.
About the resource
To create this 3D Depth Card Stack animation in Framer, I started by stacking 7 image cards together and applied a 3D transform to the main stack layer so everything sits in 3D space.
I spaced the cards using depth — the middle card stays centered, with three cards pushed back and three pulled forward. I set the middle card’s opacity to 0.3 and gradually increased it to 1 across the front and back cards — this made the layer separation more visible.
Next, I added variants that rotate the stack — first along the Y-axis, then adding X-axis rotation. With each 180° flip, the card images switch to a new set.
To keep the loop smooth, I made the last variant the same as the first and used an appear interaction with an instant transition back to default. The rest of the variants are linked with appear interactions using ease-in and ease-out transitions for a clean flow.
The 11-variant setup behind the looping 3D depth card stack animation.
The 11-variant setup behind the looping 3D depth card stack animation.
The 11-variant setup behind the looping 3D depth card stack animation.
