How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
How can I improve Framer Uni?
Let me know if there’s a missing feature or something that could be improved.
Share feedback
New
New
New
Animation
This is a Framer recreation of the rotating 3D carousel effect seen on the Corner website. Feel free to remix the project and explore how this interactive loop of cards can be built in Framer, without writing any code.
To recreate the rotating 3D carousel in Framer, I first set up a 3D space using perspective and preserve-3D transforms. Within this space, I added 12 arms, each rotated on the Y-axis in 30° gap. Each arm holds a card placed at its outer edge and rotated -90° on the Y-axis so it faces outward in the carousel.
To recreate the rotating 3D carousel in Framer, I first set up a 3D space using perspective and preserve-3D transforms. Within this space, I added 12 arms, each rotated on the Y-axis in 30° gap. Each arm holds a card placed at its outer edge and rotated -90° on the Y-axis so it faces outward in the carousel.
To recreate the rotating 3D carousel in Framer, I first set up a 3D space using perspective and preserve-3D transforms. Within this space, I added 12 arms, each rotated on the Y-axis in 30° gap. Each arm holds a card placed at its outer edge and rotated -90° on the Y-axis so it faces outward in the carousel.
The 3D space setup showing all 12 arms, each holding an image.
The 3D space setup showing all 12 arms, each holding an image.
The 3D space setup showing all 12 arms, each holding an image.
The final touch was adding a loop animation to the 3D space layer, making the circle of cards rotate smoothly and slowly around the Y-axis.
The final touch was adding a loop animation to the 3D space layer, making the circle of cards rotate smoothly and slowly around the Y-axis.
The final touch was adding a loop animation to the 3D space layer, making the circle of cards rotate smoothly and slowly around the Y-axis.
The loop effect settings.
The loop effect settings.
The loop effect settings.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
Framer Navigator
Build your ideas with ease by learning the basics of website building with Framer.
