Skip to content

component

LoopCycleCards

By Avesh Mishra

Details

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

Daily rank per list, from the first snapshot — lower is better.

12001400152148/148/228/309/79/15
  • All · #4883