Smooth 3D Slideshow in Framer

Copy component

Smooth 3D Slideshow 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

Smooth 3D Slideshow in Framer

This is a 3D slideshow component recreated in Framer, originally created by Tanya Prokofieva. Click to navigate, and watch a smooth 3D slideshow that gives your content a dynamic presence, with smooth transitions and 3D effects. Simply copy and paste it into your Framer project, then customize the cards to match your design. No code needed—just pure Framer magic!

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

Created by

3D slideshow showcasing modern cycling and lifestyle themes
3D slideshow showcasing modern cycling and lifestyle themes
3D slideshow showcasing modern cycling and lifestyle themes

About the resource

This component is a great example of what's possible in Framer with the use of components and interactions. I created this 3D slideshow using two components: one for the card itself (active and inactive states) and another to wrap them together. I applied absolute positioning to move the cards on click, while keeping the center card in relative position. To make it all smooth, I set up three different variants that the cards switch between as you move through the slideshow. For that cool 3D effect, I added depth and 3D rotation values to the cards. The finishing touch was adding click interactions to each card – so when you click one, it smoothly animates into the spotlight.

About the resource

This component is a great example of what's possible in Framer with the use of components and interactions. I created this 3D slideshow using two components: one for the card itself (active and inactive states) and another to wrap them together. I applied absolute positioning to move the cards on click, while keeping the center card in relative position. To make it all smooth, I set up three different variants that the cards switch between as you move through the slideshow. For that cool 3D effect, I added depth and 3D rotation values to the cards. The finishing touch was adding click interactions to each card – so when you click one, it smoothly animates into the spotlight.

About the resource

This component is a great example of what's possible in Framer with the use of components and interactions. I created this 3D slideshow using two components: one for the card itself (active and inactive states) and another to wrap them together. I applied absolute positioning to move the cards on click, while keeping the center card in relative position. To make it all smooth, I set up three different variants that the cards switch between as you move through the slideshow. For that cool 3D effect, I added depth and 3D rotation values to the cards. The finishing touch was adding click interactions to each card – so when you click one, it smoothly animates into the spotlight.

Interactive 3D slideshow layout connecting lifestyle and cycling themes

The three variants of the 3D slideshow component.

Interactive 3D slideshow layout connecting lifestyle and cycling themes

The three variants of the 3D slideshow component.

Interactive 3D slideshow layout connecting lifestyle and cycling themes

The three variants of the 3D slideshow component.

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

  • Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

    Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

    Creative design studio banner featuring staggered typography and motion-inspired visuals

    Staggered Text Cycle Component for Framer

    Component

  • Sonner Toast for Framer component interface with button to render a toast message on a dark background

    Sonner Toast Component in Framer

    Component

    Sonner Toast for Framer component interface with button to render a toast message on a dark background

    Sonner Toast Component in Framer

    Component

    Sonner Toast for Framer component interface with button to render a toast message on a dark background

    Sonner Toast Component in Framer

    Component