Card Cycle Animation in Framer

Copy component

Card Cycle 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

New

New

New

Component

Card Cycle Animation in Framer

This is a Framer recreation of a looping card cycle animation originally created by Mo Rashidi. Drop it into your project, customize the cards as you’d like, and showcase your content in a smooth, continuous flow.

image of Nandi Muzsik
image of Prianca S.
Image of Mo

Created by

,

and

Framer card cycle animation with rotating stack showing Trojena Mountain design
Framer card cycle animation with rotating stack showing Trojena Mountain design
Framer card cycle animation with rotating stack showing Trojena Mountain design

About the resource

To create the card cycle looping animation, I first set up the card content as a component with two states: active and inactive. In the inactive variant, the content is hidden with opacity 0, leaving only the base color and the icon on the left visible. I then created four such cards with different content and stacked them together. After arranging them on top of each other, I adjusted the z-index and rotation so each card could move to the top when active.

Next, I created four variants where each card appears on top, adjusting the z-index accordingly, and added a helper variant identical to the first one to enable the roll-over animation technique. This setup ensures the cycle loops smoothly without any friction. Finally, I connected the variants with appear interactions, allowing the cards to transition seamlessly and create a continuous looping animation.

About the resource

To create the card cycle looping animation, I first set up the card content as a component with two states: active and inactive. In the inactive variant, the content is hidden with opacity 0, leaving only the base color and the icon on the left visible. I then created four such cards with different content and stacked them together. After arranging them on top of each other, I adjusted the z-index and rotation so each card could move to the top when active.

Next, I created four variants where each card appears on top, adjusting the z-index accordingly, and added a helper variant identical to the first one to enable the roll-over animation technique. This setup ensures the cycle loops smoothly without any friction. Finally, I connected the variants with appear interactions, allowing the cards to transition seamlessly and create a continuous looping animation.

About the resource

To create the card cycle looping animation, I first set up the card content as a component with two states: active and inactive. In the inactive variant, the content is hidden with opacity 0, leaving only the base color and the icon on the left visible. I then created four such cards with different content and stacked them together. After arranging them on top of each other, I adjusted the z-index and rotation so each card could move to the top when active.

Next, I created four variants where each card appears on top, adjusting the z-index accordingly, and added a helper variant identical to the first one to enable the roll-over animation technique. This setup ensures the cycle loops smoothly without any friction. Finally, I connected the variants with appear interactions, allowing the cards to transition seamlessly and create a continuous looping animation.

Framer card cycle animation variations with multiple location cards in grid

The five variants of the card cycle component in Framer.

Framer card cycle animation variations with multiple location cards in grid

The five variants of the card cycle component in Framer.

Framer card cycle animation variations with multiple location cards in grid

The five variants of the card cycle component in Framer.

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

  • Electric border component with glowing animated frame and neon UI buttons

    Electric Border Component for Framer

    Component

    Electric border component with glowing animated frame and neon UI buttons

    Electric Border Component for Framer

    Component

    Electric border component with glowing animated frame and neon UI buttons

    Electric Border Component for Framer

    Component

  • Interactive income button with liquid hover animation

    Fluid Step Hint Animation in Framer

    Component

    Interactive income button with liquid hover animation

    Fluid Step Hint Animation in Framer

    Component

    Interactive income button with liquid hover animation

    Fluid Step Hint Animation in Framer

    Component