Card Stack Hover Animation in Framer

Copy component

Card Stack Hover 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

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.

image of Nandi Muzsik
image of Prianca S.

Created by

Stacked card UI design with article preview
Stacked card UI design with article preview
Stacked card UI design with article preview

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.

Card stack UI layout showing multiple article previews

The five variants of the card stack component.

Card stack UI layout showing multiple article previews

The five variants of the card stack component.

Card stack UI layout showing multiple article previews

The five variants of the card 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

  • swipe cards in framer

    Swipe Card Stack Component in Framer

    Component

    swipe cards in framer

    Swipe Card Stack Component in Framer

    Component

    swipe cards in framer

    Swipe Card Stack Component in Framer

    Component

  • interactive hover card

    Case Study Hover Interaction in Framer

    Component

    interactive hover card

    Case Study Hover Interaction in Framer

    Component

    interactive hover card

    Case Study Hover Interaction in Framer

    Component