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

Split-Flap Gallery is a distinctive interactive image gallery for Framer inspired by classic split-flap display boards. Images are divided into individual hinged flaps that flip, stagger, and clatter into the next slide, creating a tactile transition with a strong editorial and mechanical character.

HOW TO USE

Add Split-Flap Gallery to your Framer page
Add images, titles, captions, and links to each slide
Choose the board layout and image position
Customize the flap grid, flip pattern, timing, and stagger
Enable the timetable, autoplay, swipe, keyboard navigation, and sound
Adjust colors, typography, spacing, radius, and display styling

KEY FEATURES

Split-Flap Image Transitions — Images are divided into configurable rows and columns that flip into the next slide.
Multiple Flip Patterns — Choose from Wave, Rain, Diagonal, Bloom, or Scatter transitions.
Interactive Navigation — Use arrow controls, keyboard navigation, swipe gestures, or the timetable to move between slides.
Flap-Style Typography — Titles and optional captions use animated letter cells inspired by mechanical display boards.
Clickable Slides — Add a link to every slide for projects, case studies, CMS pages, or external destinations.
Autoplay & Hover Pause — Automatically cycle through slides with adjustable timing and optional hover pause.
Optional Flap Sound — Add subtle mechanical clatter sounds with adjustable volume.
Responsive Layouts — Use a side-by-side board layout or stack the information below the image with customizable sizing and spacing.

WHY SPLIT-FLAP GALLERY?

Split-Flap Gallery turns a familiar image gallery into a memorable interactive experience. The combination of mechanical image transitions, animated typography, and timetable navigation gives your Framer website a distinctive visual identity without relying on a conventional carousel.

5a:[["$","$L5d",null,{"post":{"id":"01a10174-3330-748c-9472-407dcd443434","title":null,"body":"

Mechanical Split Image Gallery

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Mechanical Split Image Gallery"}]}]},"author":{"framerUserId":"38425120-6213-4b66-8b3c-e3e66d07ec64","name":"Interface Studio","slug":"interfacestudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2199676/kD3QNNYGg-bGneREuqMDI2n3QFCDqegiFFxRtaNA","followed":false,"followsYou":false},"media":[],"resources":[{"id":"KMQsgQyWU14hKWxScABo","resolved":true,"title":"Split-Flap Gallery","body":"$5e","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Split-Flap Gallery","marks":[{"type":"bold"}]},{"type":"text","text":" is a distinctive interactive image gallery for Framer inspired by classic split-flap display boards. Images are divided into individual hinged flaps that flip, stagger, and clatter into the next slide, creating a tactile transition with a strong editorial and mechanical character."}]},{"type":"customHeading","content":[{"type":"text","text":"HOW TO USE"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add "},{"type":"text","text":"Split-Flap Gallery","marks":[{"type":"bold"}]},{"type":"text","text":" to your Framer page"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add images, titles, captions, and links to each slide"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose the board layout and image position"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize the flap grid, flip pattern, timing, and stagger"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Enable the timetable, autoplay, swipe, keyboard navigation, and sound"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust colors, typography, spacing, radius, and display styling"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"KEY FEATURES"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Split-Flap Image Transitions","marks":[{"type":"bold"}]},{"type":"text","text":" — Images are divided into configurable rows and columns that flip into the next slide."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple Flip Patterns","marks":[{"type":"bold"}]},{"type":"text","text":" — Choose from Wave, Rain, Diagonal, Bloom, or Scatter transitions."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Interactive Navigation","marks":[{"type":"bold"}]},{"type":"text","text":" — Use arrow controls, keyboard navigation, swipe gestures, or the timetable to move between slides."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flap-Style Typography","marks":[{"type":"bold"}]},{"type":"text","text":" — Titles and optional captions use animated letter cells inspired by mechanical display boards."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Clickable Slides","marks":[{"type":"bold"}]},{"type":"text","text":" — Add a link to every slide for projects, case studies, CMS pages, or external destinations."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Autoplay & Hover Pause","marks":[{"type":"bold"}]},{"type":"text","text":" — Automatically cycle through slides with adjustable timing and optional hover pause."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Optional Flap Sound","marks":[{"type":"bold"}]},{"type":"text","text":" — Add subtle mechanical clatter sounds with adjustable volume."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive Layouts","marks":[{"type":"bold"}]},{"type":"text","text":" — Use a side-by-side board layout or stack the information below the image with customizable sizing and spacing."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"WHY SPLIT-FLAP GALLERY?"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Split-Flap Gallery","marks":[{"type":"bold"}]},{"type":"text","text":" turns a familiar image gallery into a memorable interactive experience. The combination of mechanical image transitions, animated typography, and timetable navigation gives your Framer website a distinctive visual identity without relying on a conventional carousel."}]},{"type":"paragraph"}]},"introduction":"Mechanical Split Image Gallery","slug":"split-flap-gallery","author":{"framerUserId":"38425120-6213-4b66-8b3c-e3e66d07ec64","name":"Interface Studio","slug":"interfacestudio","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2199676/kD3QNNYGg-bGneREuqMDI2n3QFCDqegiFFxRtaNA","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/38425120-6213-4b66-8b3c-e3e66d07ec64/01a10174-0ea2-77bc-9a25-0ccf78074a68.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-03T11:09:14.258Z","updatedAt":"2026-10-03T11:09:14.258Z","publishedAt":"2026-10-03T11:09:14.253Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Headway-JrZkln.js@JTQXSTujWSRCJ88WGMZc","previewUrl":"https://splitflapgallery.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"JTQXSTujWSRCJ88WGMZc","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-03T11:09:14.930Z","updatedAt":"2026-10-03T11:09:14.930Z","reported":false}}],"$L5f"]

Suggested for you