59:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0ebkvqksdxj8m.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2zqx3_h6kju09.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3wk6_kr5br5aj.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/03j_erjzu_t0-.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js"],"PostDetailCard"] 5a:Tec8,

What is Scroll Stack Cards?

Scroll Stack Cards is a scroll-driven component that synchronises a vertical dot-and-line timeline with a 3D depth-stacked card deck. As the user scrolls, the front card peels away with natural motion while the next card rises into focus — creating a cinematic reveal for process steps, feature tours, and service pages. Designed for agencies, SaaS products, and portfolios that need structured storytelling without sacrificing visual impact.

Core Features

Scroll-synchronised 3D card deck with staggered depth, dynamic shadows, and peel-away exit animation
Vertical dot-and-line timeline with pulsing active indicator, segment fill, and per-step stats
Six built-in theme presets (Dark, Light, Indigo, Emerald, Rose, Amber) plus a fully custom colour mode
Optional background images per card with automatic gradient overlay and light-on-dark text
Full typography control — assign independent fonts for titles, descriptions, labels, stats, and card text
Toggle deck visibility for a mobile-friendly layout

Controls inside Framer

Content

Steps array — add up to 10 steps, each with label, title, description, stat, stat label, card title, card description, card icon, and card image

Theme

Theme preset selector (Dark, Light, Indigo, Emerald, Rose, Amber, Custom)
Custom colour overrides for text, accent, card background, dot, and line colours

Layout

Show Card toggle — display or hide the card deck entirely
Card Position — place the card deck on the left or right side
Scroll / Step — control how many pixels of scroll each step requires (100–1000 px)
Step Gap — vertical spacing between timeline items

Card Style

Border Radius
Shadow Intensity
Accent Bar toggle

Typography

Title Font
Description Font
Label Font
Stat Font
Stat Label Font
Card Font

Visibility

Card Deck
Card Icons
Card Descriptions
Dot Pulse animation
Progress Bar
Labels
Descriptions
Stats

Best use cases

Agency and consultancy service pages — walk prospects through your engagement process step by step
SaaS onboarding and feature tours — reveal product capabilities in a guided, scroll-driven sequence
Portfolio case study breakdowns — present project phases with visual cards and supporting metrics
Pricing or plan comparison pages — pair each tier with a dedicated card and highlight key stats

Built for production

Drop Scroll Stack onto any page, connect your content, and ship a scroll experience that holds attention.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.

56:[["$","$L59",null,{"post":{"id":"019e9887-a823-70ab-8e95-bfa3d203b08d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"933880df-e4cb-4aa4-a707-3089c7ab1ac7","name":"Aidan Looker","slug":"aidan-looker","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1284783/avatar-F6tgyME9x2RFxZFIP129WTmVxbuxWg.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"rgt6gFpFpmRuh2noO2u3","resolved":true,"title":"Scroll Stack Cards","body":"$5a","bodyJson":null,"introduction":"Scroll-driven 3D card deck with timeline","slug":"scroll-stack-cards","author":{"framerUserId":"933880df-e4cb-4aa4-a707-3089c7ab1ac7","name":"Aidan Looker","slug":"aidan-looker","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1284783/avatar-F6tgyME9x2RFxZFIP129WTmVxbuxWg.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/rgt6gFpFpmRuh2noO2u3/scroll-stack-cards-CtL97YUu7EbbSCe5A3WMVPPg6QhVVE","metadata":{"tint":{"h":0,"s":0,"l":9},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-21T09:15:48.605Z","updatedAt":"2026-06-13T05:24:19.699Z","publishedAt":"2026-06-05T16:04:47.779Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://scrollstackcards.framer.website/","price":"14","paymentUrl":"https://teampixelau.lemonsqueezy.com/checkout/buy/5e02afbe-4876-4219-b1e6-c5eaf4eaa066","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"DTt5nI5LapyCwl5wWSOZ","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":60,"liked":false},"comments":{"count":2},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-05T16:04:47.779Z","updatedAt":"2026-06-05T16:04:47.779Z","reported":false}}],"$L5b"]

Suggested for you