Component
Card Stack Hover Animation in Framer
This is a Framer recreation of the card stack hover animation from Good is the New Cool’s website. Remix the project or copy the component to explore how this layered hover interaction works and use it in your own designs.
About the resource
To create this hover animation, I built a component with five variants, one for the closed stack state and the rest for the open and hover states of each card. The cards were stacked using absolute positioning to layer them neatly.
For the open states, I switched the variants to relative positioning so all the cards became visible. Each text, icon, and image also had its own active state variant, since they were individual components.
Finally, I set up the interactions: hovering over the first card triggers the open state with the first card active, and each card connects to its respective hover variant through mouse enter. From the open states, mouse leave brings the stack back to the default closed state.
About the resource
To create this hover animation, I built a component with five variants, one for the closed stack state and the rest for the open and hover states of each card. The cards were stacked using absolute positioning to layer them neatly.
For the open states, I switched the variants to relative positioning so all the cards became visible. Each text, icon, and image also had its own active state variant, since they were individual components.
Finally, I set up the interactions: hovering over the first card triggers the open state with the first card active, and each card connects to its respective hover variant through mouse enter. From the open states, mouse leave brings the stack back to the default closed state.
About the resource
To create this hover animation, I built a component with five variants, one for the closed stack state and the rest for the open and hover states of each card. The cards were stacked using absolute positioning to layer them neatly.
For the open states, I switched the variants to relative positioning so all the cards became visible. Each text, icon, and image also had its own active state variant, since they were individual components.
Finally, I set up the interactions: hovering over the first card triggers the open state with the first card active, and each card connects to its respective hover variant through mouse enter. From the open states, mouse leave brings the stack back to the default closed state.
The five variants of the card stack component.
The five variants of the card stack component.
The five variants of the card stack component.
