5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T764,

Stacked Sync Cards – Scrollable Card List with Click-to-Sync Image

Stacked Sync Cards is a modern, interactive Framer component that pairs a scrollable stack of content cards with a large synced image panel. Instead of showing every service or topic with its own static image, it displays a clean stack of titled cards that scroll vertically, and updates the side image the moment a visitor clicks a different card. The seamless image sync gives your consultancy, agency, or corporate site a premium, editorial feel with almost no setup required.

Click-to-Sync Interaction

Cards stack and scroll vertically within the section.
Side image updates in sync with the clicked card.
Smooth crossfade transitions feel natural and intentional.
Fully responsive and optimized for modern GPU-accelerated performance.

Customizable Design Controls Stacked Sync Cards includes full Framer property controls so you can instantly match it to your brand or layout.

Customize

Cards – Add, remove, or reorder as many cards as needed.
Title – Edit the heading per card.
Text – Edit the body description per card.
Image – Assign a unique image to each card, shown in the synced panel.

How It Works Stacked Sync Cards tracks click events across the scrolling card stack. When a visitor clicks a card, the component crossfades the side image to match, while the card stack continues to scroll smoothly through the remaining titles and descriptions. This keeps the visual focus tied to whichever card the visitor is engaging with, making the experience feel fluid and cohesive.

5a:[["$","$L5d",null,{"post":{"id":"01a0fb53-3051-739f-baae-c7b53870ea5b","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"492da4c7-1f68-44bb-a835-d654f4ede7b8","name":"Pentaclay","slug":"pentaclay","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28817/5IpLqH7F9iimwZKthWdWp8kYrU-vxHo09smZpSjxasGJhxW7DH2mYch2a.png","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"9c82mv6b9XDyeBmO7ytN","resolved":true,"title":"Stacked Sync Cards","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Stacked Sync Cards – Scrollable Card List with Click-to-Sync Image","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Stacked Sync Cards is a modern, interactive Framer component that pairs a scrollable stack of content cards with a large synced image panel. Instead of showing every service or topic with its own static image, it displays a clean stack of titled cards that scroll vertically, and updates the side image the moment a visitor clicks a different card. The seamless image sync gives your consultancy, agency, or corporate site a premium, editorial feel with almost no setup required."}]},{"type":"paragraph","content":[{"type":"text","text":"Click-to-Sync Interaction","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cards stack and scroll vertically within the section."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Side image updates in sync with the clicked card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Smooth crossfade transitions feel natural and intentional."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Fully responsive and optimized for modern GPU-accelerated performance."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Customizable Design Controls","marks":[{"type":"bold"}]},{"type":"text","text":" Stacked Sync Cards includes full Framer property controls so you can instantly match it to your brand or layout."}]},{"type":"paragraph","content":[{"type":"text","text":"Customize","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Cards","marks":[{"type":"bold"}]},{"type":"text","text":" – Add, remove, or reorder as many cards as needed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Title","marks":[{"type":"bold"}]},{"type":"text","text":" – Edit the heading per card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text","marks":[{"type":"bold"}]},{"type":"text","text":" – Edit the body description per card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image","marks":[{"type":"bold"}]},{"type":"text","text":" – Assign a unique image to each card, shown in the synced panel."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How It Works","marks":[{"type":"bold"}]},{"type":"text","text":" Stacked Sync Cards tracks click events across the scrolling card stack. When a visitor clicks a card, the component crossfades the side image to match, while the card stack continues to scroll smoothly through the remaining titles and descriptions. This keeps the visual focus tied to whichever card the visitor is engaging with, making the experience feel fluid and cohesive."}]}]},"introduction":"Stacked Cards with Synced Image","slug":"stacked-sync-cards","author":{"framerUserId":"492da4c7-1f68-44bb-a835-d654f4ede7b8","name":"Pentaclay","slug":"pentaclay","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28817/5IpLqH7F9iimwZKthWdWp8kYrU-vxHo09smZpSjxasGJhxW7DH2mYch2a.png","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/492da4c7-1f68-44bb-a835-d654f4ede7b8/01a0fb5d-5456-7487-891e-ea50759a8213.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T06:35:27.606Z","updatedAt":"2026-10-02T06:46:50.234Z","publishedAt":"2026-10-02T06:35:27.603Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://stackedsynccards.framer.website/","price":"5","paymentUrl":"https://pentaclay-components.blink.store/stacked-sync-cards","workshop":false,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"mjuXIOdETdMWvImYZZHY","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T06:35:28.209Z","updatedAt":"2026-10-02T06:35:28.209Z","reported":false}}],"$L5f"]

Suggested for you