Draggable Card Stack
A smooth, ticker-style card stack, looping, drag-down card stack with anticipatory scaling, ghost handoff, and optional auto-rotate.
Make it with Workshop
Build your own component with AI
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! 🫰
