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

Preview component: Here

About

The Expandable Image Strip is a versatile component that creates an elegant, interactive image gallery experience. It displays multiple images in a condensed strip layout, with smooth animations that expand cards when users interact with them.

Key Features

Flexible Interaction Modes - Choose between hover (desktop), click (all devices), or static display to match your design needs
Smart Proximity Scaling - Cards adjacent to the active card automatically adjust their width for a natural, flowing appearance
Customizable Image Rendering - Control how much of each image is visible when expanded, from 10% to 100% of the component width
Responsive Design - Automatically adapts to touch devices, ensuring optimal interaction on mobile and tablet
Visual Customization - Full control over border radius, card spacing, borders, shadows, and inactive card dimming
Smooth Animations - Built-in transition controls with optimized performance for silky-smooth expansions
Accessibility Ready - Includes proper ARIA labels and keyboard navigation support

Perfect Use Cases

Portfolio galleries showcasing multiple projects
Product image carousels for e-commerce
Before/after comparisons
Team member showcases
Feature highlights
Image-based navigation menus

The component intelligently handles layout calculations, ensuring images remain centered and properly scaled regardless of the number of cards or container size.

The proximity effect creates a natural visual hierarchy, drawing attention to the active card while keeping neighboring cards visible and accessible.

Simply add your images, customize the interaction mode and visual styling, and you’re ready to create an engaging gallery experience that works beautifully across all devices.

How to Use

Adding Images: - Click the “Images” property in the control panel - Add images using the “+” button - Each image can be uploaded or linked from a URL
Reorder images by dragging them in the array Interaction
Settings: - Choose “Hover” for desktop hover expansion (auto-switches to click on mobile)
Choose “Click” for click/tap expansion on all devices
Choose “None” for a static display without interaction customizing the expansion
Use “Image Render Width” to control how much of the image shows when expanded (10-100%)
Adjust “Proximity Effect” to make cards near the active card appear wider (0-5)
Set “Default Expanded Index” to have a card pre-expanded on load (0 = none, 1 = first image, etc.)
Visual Styling: - Adjust “Border Radius” for rounded corners on cards
Set “Card Gap” to control spacing between cards
Add borders using the “Border” control
Apply shadows to active cards with “Active Shadow”
Dimming Effect: - Enable “Inactive Dimming” to darken non-active cards
Customize the “Overlay Color” for the dimming effect Animation
Use the “Transition” control to customize expansion speed and easing

Tips

The component automatically adapts to touch devices
Images are centered and cropped to fit the card height
On mobile, interaction automatically switches to click/tap regardless of mode setting

5a:[["$","$L5d",null,{"post":{"id":"019cc303-2f40-766d-88a4-17059c87cf0d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"5099e2ed-914a-43df-a1ec-2f05b5d3aafa","name":"Lastdraft Studio","slug":"lastdraftstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5099e2ed-914a-43df-a1ec-2f05b5d3aafa/ji5venf8","badges":["available","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"uz3lCUJnLZmFRTo2ha41","resolved":true,"title":"Image Strip Expander","body":"$5e","bodyJson":null,"introduction":"An interactive image strip component","slug":"image-strip-expander","author":{"framerUserId":"5099e2ed-914a-43df-a1ec-2f05b5d3aafa","name":"Lastdraft Studio","slug":"lastdraftstudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/5099e2ed-914a-43df-a1ec-2f05b5d3aafa/ji5venf8","badges":["available","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/uz3lCUJnLZmFRTo2ha41/image-strip-expander-SckTDa2gxH87Z6xwDqgkopmq84zsaX","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-03-01T11:46:52.471Z","updatedAt":"2026-04-20T12:32:15.344Z","publishedAt":"2026-03-06T11:58:11.776Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://base-imagestripexpander.framer.website","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_UVZzkgVR8TJZZkFbTzUakpQn1wWeXRJc4tqZF4ABfIg","workshop":true,"categories":[{"id":"c3e183d1-597a-4479-8a6f-244ae3c96f40","name":"Cards","slug":"cards"}],"lastSaveId":"sB6DmOQ1LsOIMxty4mUb","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-03-06T11:58:11.776Z","updatedAt":"2026-03-06T11:58:11.776Z","reported":false}}],"$L5f"]

Suggested for you