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