3D Image Stack Animation in Framer

Copy component

3D Image Stack 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 Image Stack Animation in Framer

This is a Framer recreation of the 3D image stack animation by Sandro Ieva. Remix the project or grab the component to bring this fun hover animation to your own project.

image of Nandi Muzsik
image of Prianca S.
Image of Sandro Ieva

Created by

,

and

3D image stack with layered hover effects and interactive elements
3D image stack with layered hover effects and interactive elements
3D image stack with layered hover effects and interactive elements

About the resource

To create this 3D hover animation, I set up two components with hover variants. In the card component, I simply added a hover state to the image card using absolute positioning.

About the resource

To create this 3D hover animation, I set up two components with hover variants. In the card component, I simply added a hover state to the image card using absolute positioning.

About the resource

To create this 3D hover animation, I set up two components with hover variants. In the card component, I simply added a hover state to the image card using absolute positioning.

Interactive hover effect on a 3D image stack with a vintage camera

The default and hover variant of the card component.

Interactive hover effect on a 3D image stack with a vintage camera

The default and hover variant of the card component.

Interactive hover effect on a 3D image stack with a vintage camera

The default and hover variant of the card component.

In the 3D image stack component, I wrapped three card components, adding depth to the first and third. Then, I stacked them in another layer, applied perspective, enabled preserve 3D, and rotated this layer along the y-axis in its hover state. Finally, I added mouse enter and mouse leave interactions to the image stack component variants.

In the 3D image stack component, I wrapped three card components, adding depth to the first and third. Then, I stacked them in another layer, applied perspective, enabled preserve 3D, and rotated this layer along the y-axis in its hover state. Finally, I added mouse enter and mouse leave interactions to the image stack component variants.

In the 3D image stack component, I wrapped three card components, adding depth to the first and third. Then, I stacked them in another layer, applied perspective, enabled preserve 3D, and rotated this layer along the y-axis in its hover state. Finally, I added mouse enter and mouse leave interactions to the image stack component variants.

3D image transformation with hover effect and perspective settings

The default and hover variant of the 3D image stack component.

3D image transformation with hover effect and perspective settings

The default and hover variant of the 3D image stack component.

3D image transformation with hover effect and perspective settings

The default and hover variant of the 3D image stack 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

  • A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

    A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

    A dark interface showing glitchy text reading "TFXT GLITCH + FRAMEX" with a typing effect and a hovered block of random characters below

    Text Glitch Component for Framer

    Component

  • Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component

    Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component

    Blurred portrait with a layered 3D card depth effect

    3D Depth Card Stack Animation in Framer

    Component