Draggable Card Stack

A smooth, looping, drag-down card stack with anticipatory scaling, ghost handoff, and optional auto-rotate.A polished, ticker-style card stack for Framer.

A smooth, looping, drag-down card stack with anticipatory scaling, ghost handoff, and optional auto-rotate.A polished, ticker-style card stack for Framer. Drag the top card downward to advance. The next card scales to 1 , the third card moves up subtly, and the outgoing card ghosts behind —shrinking from 1 → 0.95 as it slides to the back. It loops forever and can also auto-rotate on a timer. Highlights Downward drag with smooth release (no jank or snap-back) Anticipatory scaling of the 2nd/3rd cards during drag Ghost handoff : outgoing top card visibly moves behind others Auto-rotate (on/off + adjustable interval) Works with your own card instances (Ticker-style linking) How to use (3 steps) Drop DraggableCardStack on the canvas (defaults to 400×280 so it’s visible instantly). In the right panel, link 2–3 MyCard instances to Card 1–3 . Set each card’s variant on the instance (like Framer Ticker). Preview and drag down on the top card. Enjoy the loop. 💡Tip: Use ~16px vertical gap in your layout around the component so shadows read nicely. Component properties Align (Left / Center / Right) - Horizontal alignment of the stack inside the component frame . Applies to both the live cards and the handoff “ghost,” so the animation stays consistent. Gap (px) : 16 – vertical offset between stacked cards Drag (px) : 38 – distance for a full advance 2nd scale base : 0.95 – scale of the 2nd card at rest (→ 1 during drag) 3rd scale base : 0.90 – scale of the 3rd card at rest (→ 0.95 during drag) Top scale min : 0.99 – how much the top card shrinks while dragging Outgoing scale : 0.95 – ghost card shrinks to this as it moves to the back Auto-rotate : false – toggle automatic rotation Interval (ms) : 2500 – timer for auto-rotate Initial size : 400 × 280 (visible on drop) Notes Needs at least two linked cards to render. For the most “buttery” feel, keep small-scale deltas (0.95 / 0.90) and a drag of ~38px. If you ship something with this, tag me—I would love to see it! 🫰