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:T83c,

Tab List Image Sync – Click-to-Sync Tabs with Image and Overlay Text

Tab List Image Sync is a modern, interactive Framer component that pairs a minimal text tab list with a large synced image panel. Instead of showing every service with its own layout, it displays a clean list of tab labels by default, with an underline marking the active tab, and updates the image and overlay text card the moment a visitor clicks a different tab. The seamless sync gives your consultancy, agency, or corporate site a premium, editorial feel with almost no setup required.

Click-to-Sync Interaction

Underline marks the active tab in the list.
Image and overlay text card update in sync with the clicked tab.
Icon on the overlay card stays visible across every state.
Smooth crossfade transitions feel natural and intentional.
Fully responsive and optimized for modern GPU-accelerated performance.

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

Customize

List 01–04 – Edit the tab label text.
Line – Set the underline style for the active tab.
Icon – Assign the icon shown on the overlay card.
Card BG – Set the background color of the overlay text card.
Text 01–04 – Edit the overlay description per tab.
Image 01–04 – Assign a unique image to each tab.

How It Works Tab List Image Sync tracks click events across the tab list. When a visitor clicks a tab, the component underlines it and crossfades the image while updating the overlay text card to match. The other tabs stay in their default plain state, keeping the active selection clear and making the experience feel seamless and intentional.

5a:[["$","$L5d",null,{"post":{"id":"01a0fb51-3dd2-742a-a25b-cfce72fedfb8","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":"ZZI03ggNc17KmjWFp2oB","resolved":true,"title":"Tab List Image Sync","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Tab List Image Sync – Click-to-Sync Tabs with Image and Overlay Text","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Tab List Image Sync is a modern, interactive Framer component that pairs a minimal text tab list with a large synced image panel. Instead of showing every service with its own layout, it displays a clean list of tab labels by default, with an underline marking the active tab, and updates the image and overlay text card the moment a visitor clicks a different tab. The seamless 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":"Underline marks the active tab in the list."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image and overlay text card update in sync with the clicked tab."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icon on the overlay card stays visible across every state."}]}]},{"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":" Tab List Image Sync 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":"List 01–04","marks":[{"type":"bold"}]},{"type":"text","text":" – Edit the tab label text."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Line","marks":[{"type":"bold"}]},{"type":"text","text":" – Set the underline style for the active tab."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Icon","marks":[{"type":"bold"}]},{"type":"text","text":" – Assign the icon shown on the overlay card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Card BG","marks":[{"type":"bold"}]},{"type":"text","text":" – Set the background color of the overlay text card."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Text 01–04","marks":[{"type":"bold"}]},{"type":"text","text":" – Edit the overlay description per tab."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image 01–04","marks":[{"type":"bold"}]},{"type":"text","text":" – Assign a unique image to each tab."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"How It Works","marks":[{"type":"bold"}]},{"type":"text","text":" Tab List Image Sync tracks click events across the tab list. When a visitor clicks a tab, the component underlines it and crossfades the image while updating the overlay text card to match. The other tabs stay in their default plain state, keeping the active selection clear and making the experience feel seamless and intentional."}]}]},"introduction":"Underline Tabs with Image Sync","slug":"tab-list-image-sync","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/01a0fb5c-73cd-7649-8d80-b01de636bb39.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-02T06:33:20.057Z","updatedAt":"2026-10-02T06:45:54.060Z","publishedAt":"2026-10-02T06:33:20.054Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://tablistimagesync.framer.website/","price":"5","paymentUrl":"https://pentaclay-components.blink.store/tab-list-image-sync","workshop":false,"categories":[{"id":"7677fa83-43ce-41a2-a3fe-db438ec0fd33","name":"Interactive","slug":"interactive"}],"lastSaveId":"si7GcQFGu4Ffm62bJ1PK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":2,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-02T06:33:20.594Z","updatedAt":"2026-10-02T06:33:20.594Z","reported":false}}],"$L5f"]

Suggested for you