Smooth 3D Slideshow in Framer

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.