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.
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.
The five variants of the card cycle component in Framer.
The five variants of the card cycle component in Framer.
The five variants of the card cycle component in Framer.
