LoopCycleCards

LoopCycleCards

About LoopCycleCards

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