---
title: "LoopCycleCards — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Avesh Mishra · Cards. LoopCycleCards is a lightweight, highly–tunable card rotator."
canonical: "https://framer.elliotli.dev/component/loopcyclecards"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/LoopCycleCards

# LoopCycleCards

[View on Framer](https://framer.com/marketplace/components/loopcyclecards/?via=elliot-li)

![LoopCycleCards preview image 1](https://framer.elliotli.dev/og/component/loopcyclecards/44d344337ad1664e/1600x1200.jpg)

## Summary

LoopCycleCards is a lightweight, highly–tunable card rotator.

## Description

**LoopCycleCards** is a lightweight, highly–tunable card rotator. It displays one image card at a time and cycles through your set with smooth, customizable transitions. Control the speed and rhythm, choose from multiple animation styles, and tailor the card size, rounding, and background to match any layout.

## What it does

-   Shows **one card at a time**, automatically **cycles** through your images.
    
-   **In / hold / out** timeline gives you precise control over the cadence.
    
-   Supports **shuffle order** and **pause on hover** for user control.
    
-   Works great in fixed-size frames or responsive sections.
    

## Animations (built-in)

Choose one of these in the **Animation** control:**Pop**, **Slide Left**, **Slide Up**, **Slide Down**, **Zoom**, **Rotate**, **Flip**, **Bounce**, **Elastic**, **Glitch**, **Fade**, **Spiral**, **Wave**, **Morph**.

## Key Properties

**Images**

-   **Image 1 … Image 10** — up to 10 image slots.
    

**Timing & Playback**

-   **Speed** — global playback multiplier.
    
-   **Delay Between** — gap before starting the next card.
    
-   **In Duration** — time for the entrance animation.
    
-   **Hold Duration** — how long the card stays visible.
    
-   **Out Duration** — time for the exit animation.
    
-   **Loop** (Yes/No) — repeat the sequence.
    
-   **Shuffle Order** (Yes/No) — randomize the card order each cycle.
    
-   **Pause on Hover** (Yes/No) — stop cycling while hovered.
    

**Appearance**

-   **Card Width** — e.g., 360px.
    
-   **Card Height** — e.g., 480px.
    
-   **Border Radius** — e.g., 20px rounded corners.
    
-   **Background** — card background color (shown under images).
    
-   **Animation** — pick from the list above.
    

## Why you’ll love it

-   **Drop-in simple**: add images, pick an animation, done.
    
-   **Art-direction friendly**: fine-tune timing and rhythm for the mood you want.
    
-   **Versatile**: from product spotlights and testimonials to editorial features.
    
-   **Performance-conscious**: only one card animates at a time.
    

## Best Uses

-   Homepage heroes and **above-the-fold** highlights
    
-   **Case study** covers / portfolio teasers
    
-   **Product features** or testimonials running in a loop
    
-   Event or announcement **visuals** with motion
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #5365

## Details

- **Author**: Avesh Mishra
- **Price**: $12.00
- **Published**: 2025-10-02
- **Updated**: 2025-10-02
- **Added**: 2025-09-28
- **Categories**: Cards

## More like this

-   [Particle Team Cards](/component/particle-team-cards) — Frame Native · Free — Portraits that move as particles
-   [Card Swap](/component/card-swap) — Antoine Lacombled · $9 — A 3D card stack you can fling
-   [Overlay Reveal Card](/component/overlay-reveal-card) — Pentaclay · Free — Project Card With Hover Overlay
-   [Deckshift](/component/deckshift) — BeyondPixel · $15 — Interactive Stacked Focus Cards