Image Sync Accordion – Click-to-Expand List with a Synced Image Panel
Image Sync Accordion is a modern, interactive Framer component that pairs a clean icon list with a large synced image panel. Instead of showing every detail at once, it displays a minimal list of icon-led titles by default, and expands the active item's description the moment a visitor clicks. The side image updates in sync with the active item, giving your values, features, or process steps a premium, editorial feel with almost no setup required.
Click-to-Expand with Synced Image
Expands to reveal a description beneath the clicked title.
Side image panel updates to match the active list item.
Inactive items stay minimal and collapsed, keeping focus sharp.
Smooth height and fade transitions feel natural and intentional.
Only one item expands at a time, clean and distraction-free.
Customizable Design Controls Image Sync Accordion includes full Framer property controls so you can instantly match it to your brand or layout.
Customize
List Items – Add, remove, or reorder as many items as needed.
Icon – Assign a unique icon to each list item.
Title & Description – Edit label and body text per item.
Image – Assign a unique image to each item, shown in the synced panel.
Typography – Customize title and text font size independently.
Divider Style – Adjust line color, thickness, or remove entirely.
Transition Speed & Easing – Control how quickly items expand and collapse.
Title, Text & Icon Colors – Fine-tune contrast between states.
How It Works Image Sync Accordion tracks click events across each list item. When a visitor clicks a title, the component smoothly animates its description open while the image panel crossfades to the corresponding visual. All other items simultaneously collapse, keeping visual focus entirely on the selected item. Clicking another item resets the layout and updates the image again, making the experience feel fluid, intentional, and fully interactive.
Image Sync Accordion – Click-to-Expand List with a Synced Image Panel
Image Sync Accordion is a modern, interactive Framer component that pairs a clean icon list with a large synced image panel. Instead of showing every detail at once, it displays a minimal list of icon-led titles by default, and expands the active item's description the moment a visitor clicks. The side image updates in sync with the active item, giving your values, features, or process steps a premium, editorial feel with almost no setup required.
Click-to-Expand with Synced Image
Expands to reveal a description beneath the clicked title.
Side image panel updates to match the active list item.
Inactive items stay minimal and collapsed, keeping focus sharp.
Smooth height and fade transitions feel natural and intentional.
Only one item expands at a time, clean and distraction-free.
Customizable Design Controls Image Sync Accordion includes full Framer property controls so you can instantly match it to your brand or layout.
Customize
List Items – Add, remove, or reorder as many items as needed.
Icon – Assign a unique icon to each list item.
Title & Description – Edit label and body text per item.
Image – Assign a unique image to each item, shown in the synced panel.
Typography – Customize title and text font size independently.
Divider Style – Adjust line color, thickness, or remove entirely.
Transition Speed & Easing – Control how quickly items expand and collapse.
Title, Text & Icon Colors – Fine-tune contrast between states.
How It Works Image Sync Accordion tracks click events across each list item. When a visitor clicks a title, the component smoothly animates its description open while the image panel crossfades to the corresponding visual. All other items simultaneously collapse, keeping visual focus entirely on the selected item. Clicking another item resets the layout and updates the image again, making the experience feel fluid, intentional, and fully interactive.
