5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/1rdgef59pv3cw.js","/creators-assets/_next/static/immutable/chunks/0zdv1ssrxkrvj.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/0gxswkth5mc6b.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/36invrtoq879v.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/0j6nyijn0flqd.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3h1dt97hv5ik0.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1h-r9oggqjick.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5d:T748,

Gatefold is a page-entry loader. Your word types in, splits at the letter you choose, and opens a slot in the middle of the type. A sequence of images cuts through the gap, then the last one expands to fill the frame while the two halves of the word are pushed off screen — straight into your hero.

Everything is a property. Set the word, choose where it splits, drop in as many flash images as you like, pick the final image, and tune the speed and cut timing until it feels right. Font, size and colours are yours. On tablet and phone the type scales down automatically so the word never overflows.

It waits before it plays. The animation holds until your fonts have loaded and your images have decoded, so nothing pops or reflows mid-run — with a hard cap so a slow image can never leave a visitor staring at a blank screen. Images are laid out at full size and scaled down by transform, so each one rasterises once at final resolution instead of being re-rendered every frame. The heading gap is static rather than animated, which keeps the browser from re-laying out the type on every tick.

An On finish event fires when the sequence completes, so you can trigger your hero animation, start a scroll unlock, or chain into anything else on the page.

Includes

Any word, split at any letter
Up to 8 flash images plus a final image
Responsive image sources — phones download smaller files
Auto scale for tablet and phone widths
Speed and cut-interval controls
Full font, size and colour control
On finish event handler
Canvas preview mode — see the open state while you design, or play it live on canvas

Built with GSAP. Works on desktop, tablet and mobil

59:[["$","$L5c",null,{"post":{"id":"01a07413-123b-71a8-a964-2b652e05f393","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"34a2742a-5a77-4f90-b27e-96a2ed2e57f2","name":"Siddhant Lamichhane","slug":"siddhant-lamichhane","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"0Ux9O0ELkxnItwjXKVgg","resolved":true,"title":"Gatefold","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Gatefold is a page-entry loader. Your word types in, splits at the letter you choose, and opens a slot in the middle of the type. A sequence of images cuts through the gap, then the last one expands to fill the frame while the two halves of the word are pushed off screen — straight into your hero."}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is a property. Set the word, choose where it splits, drop in as many flash images as you like, pick the final image, and tune the speed and cut timing until it feels right. Font, size and colours are yours. On tablet and phone the type scales down automatically so the word never overflows."}]},{"type":"paragraph","content":[{"type":"text","text":"It waits before it plays. The animation holds until your fonts have loaded and your images have decoded, so nothing pops or reflows mid-run — with a hard cap so a slow image can never leave a visitor staring at a blank screen. Images are laid out at full size and scaled down by transform, so each one rasterises once at final resolution instead of being re-rendered every frame. The heading gap is static rather than animated, which keeps the browser from re-laying out the type on every tick."}]},{"type":"paragraph","content":[{"type":"text","text":"An "},{"type":"text","text":"On finish","marks":[{"type":"bold"}]},{"type":"text","text":" event fires when the sequence completes, so you can trigger your hero animation, start a scroll unlock, or chain into anything else on the page."}]},{"type":"paragraph","content":[{"type":"text","text":"Includes","marks":[{"type":"bold"}]}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Any word, split at any letter"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Up to 8 flash images plus a final image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Responsive image sources — phones download smaller files"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Auto scale for tablet and phone widths"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Speed and cut-interval controls"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Full font, size and colour control"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"On finish event handler"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Canvas preview mode — see the open state while you design, or play it live on canvas"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Built with GSAP. Works on desktop, tablet and mobil"}]}]},"introduction":"A word splits open, a picture flas","slug":"gatefold","author":{"framerUserId":"34a2742a-5a77-4f90-b27e-96a2ed2e57f2","name":"Siddhant Lamichhane","slug":"siddhant-lamichhane","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/34a2742a-5a77-4f90-b27e-96a2ed2e57f2/01a073fa-174e-7647-b976-2ae0399342f2.png","metadata":{"tint":{"h":60,"s":53,"l":39},"width":2430,"height":1562}}],"post":null,"createdAt":"2026-09-06T00:16:41.547Z","updatedAt":"2026-09-06T00:16:41.547Z","publishedAt":"2026-09-06T00:16:41.545Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Preloader-gPOgLe.js@WkyBvrBGcLOaNpCD6j64","previewUrl":"https://exhilarated-types-555458.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"WkyBvrBGcLOaNpCD6j64"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":0,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-09-06T00:16:42.043Z","updatedAt":"2026-09-06T00:16:42.043Z","reported":false}}],"$L5e"]

Suggested for you