---
title: "Draggable Card Stack — Framer component · Best of Framer"
description: "$5.00 · Framer component · by gr8pixel · Cards. A smooth, looping, drag-down card stack with anticipatory scaling, ghost handoff, and optional auto-rotate.A polished, ticker-style card…"
canonical: "https://framer.elliotli.dev/component/draggable-card-stack"
---

[Home](/)/[Components](/components)/[Cards](/components/category/cards)/Draggable Card Stack

# Draggable Card Stack

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

![Draggable Card Stack preview image 1](https://framer.elliotli.dev/og/component/draggable-card-stack/897ad1c7afaa7739/1600x1200.jpg)

## Summary

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

## Description

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)

1.  Drop **DraggableCardStack** on the canvas (defaults to 400×280 so it’s visible instantly).
    
2.  In the right panel, **link 2–3 MyCard instances** to **Card 1–3**.
    
    -   Set each card’s variant **on the instance** (like Framer Ticker).
        
3.  **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

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8n4yakam-oqaliSBbdwUWQgadAgZaXAZiA9xtZt)

-   **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! 🫰

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

-   All · #7873

## Details

- **Author**: gr8pixel
- **Price**: $5.00
- **Published**: 2025-09-02
- **Updated**: 2025-12-15
- **Added**: 2025-08-21
- **Categories**: Cards

## More like this

-   [BlogX Blog Card](/component/blogx-blog-card) — Themomarket · $8 — Blog Framer Component
-   [FluxPrice](/component/fluxprice) — Jeshan Athulesh · $49 — Elevate your SaaS conversion rate in minutes with FluxPrice.
-   [Feature Ribbon Cards](/component/feature-ribbon-cards) — Studio Digital · Free — Interactive image feature cards
-   [Dynamic Pricing Calc](/component/dynamic-pricing-calc) — Dmitry Vorobey · $12 — Pricing cards with live calculator