Gatefold

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