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

Elevate your Framer site with a completely custom, highly-performant photo gallery component. The Striped Carousel replaces basic sliding animations with a sophisticated "falling curtain" transition that adds a premium, dynamic feel to your portfolio or landing page.

### Key Features

- Dynamic Transition: Images are sliced into perfectly aligned vertical stripes that fall away in a staggered sequence depending on navigation direction.

- Hardware Accelerated: Built with advanced CSS `transform` and `borderRadius` mathematics to ensure subpixel perfection and flawless 120fps rendering, avoiding the lag of heavy `clip-path` calculations.

- Responsive Layout: Works beautifully at any aspect ratio, with images automatically scaling via native `cover` logic.

- Fast Navigation Support: Click through images as fast as you want—in-progress animations will seamlessly snap to completion to keep up with the user.

### Customization Options

Available directly in the Framer Property Panel:

- Images: Add as many photos as you want via standard Framer image arrays.

- Stripes: Control the exact number of slices (up to 20 for optimal performance).

- Animation: Fine-tune the fall distance, total duration, and stagger gap.

- Aesthetics: Configure border radius, width, color, and style.

- Arrows: Fully style the navigation arrows (Size, Background, Color).

- Overflow: Toggle whether the falling stripes are hidden by the component bounds or visibly fall outside of them.

5a:[["$","$L5d",null,{"post":{"id":"019df231-1694-7e20-b8a8-3b3b95688284","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"2XafbCqATzsyzbY7JksW","resolved":true,"title":"Striped Carousel","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Elevate your Framer site with a completely custom, highly-performant photo gallery component. The Striped Carousel replaces basic sliding animations with a sophisticated \"falling curtain\" transition that adds a premium, dynamic feel to your portfolio or landing page."}]},{"type":"paragraph","content":[{"type":"text","text":"### Key Features","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Dynamic Transition:","marks":[{"type":"bold"}]},{"type":"text","text":" Images are sliced into perfectly aligned vertical stripes that fall away in a staggered sequence depending on navigation direction."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Hardware Accelerated:","marks":[{"type":"bold"}]},{"type":"text","text":" Built with advanced CSS `transform` and `borderRadius` mathematics to ensure subpixel perfection and flawless 120fps rendering, avoiding the lag of heavy `clip-path` calculations."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Responsive Layout:","marks":[{"type":"bold"}]},{"type":"text","text":" Works beautifully at any aspect ratio, with images automatically scaling via native `cover` logic."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Fast Navigation Support:","marks":[{"type":"bold"}]},{"type":"text","text":" Click through images as fast as you want—in-progress animations will seamlessly snap to completion to keep up with the user."}]},{"type":"paragraph","content":[{"type":"text","text":"### Customization Options","marks":[{"type":"bold"}]}]},{"type":"paragraph","content":[{"type":"text","text":"Available directly in the Framer Property Panel:"}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Images:","marks":[{"type":"bold"}]},{"type":"text","text":" Add as many photos as you want via standard Framer image arrays."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Stripes:","marks":[{"type":"bold"}]},{"type":"text","text":" Control the exact number of slices (up to 20 for optimal performance)."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Animation:","marks":[{"type":"bold"}]},{"type":"text","text":" Fine-tune the fall distance, total duration, and stagger gap."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Aesthetics:","marks":[{"type":"bold"}]},{"type":"text","text":" Configure border radius, width, color, and style."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Arrows:","marks":[{"type":"bold"}]},{"type":"text","text":" Fully style the navigation arrows (Size, Background, Color)."}]},{"type":"paragraph","content":[{"type":"text","text":"- "},{"type":"text","text":"Overflow:","marks":[{"type":"bold"}]},{"type":"text","text":" Toggle whether the falling stripes are hidden by the component bounds or visibly fall outside of them."}]},{"type":"paragraph"}]},"introduction":"Striped image reveal transition.","slug":"striped-carousel","author":{"framerUserId":"ff3d8eca-ae13-4845-bd7e-9c26d1085c71","name":"Jirei","slug":"jirei","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/2XafbCqATzsyzbY7JksW/striped-carousel-bYhXYZyGozdqDeeXF8tWNQTL5DA3Ma","metadata":{"tint":{"h":180,"s":53,"l":42},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-02T18:11:29.587Z","updatedAt":"2026-07-30T21:32:58.925Z","publishedAt":"2026-05-04T08:53:16.564Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Striped-Reveal-Carousel-2BSIXw.js@hXqQjNHLVOnMuKXeBFX8","previewUrl":"https://diverse-absolute-231370.framer.app/preview","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"hXqQjNHLVOnMuKXeBFX8","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-04T08:53:16.564Z","updatedAt":"2026-05-04T08:53:16.564Z","reported":false}}],"$L5f"]

Suggested for you