156
AI ready

Image Tile Assemble

£7
or the whole Vault, £99
Skip the demo Open in new tab

Pinned scroll section where loose tiles cut from one photograph float around a headline, then pull into register wave by wave until the seams close into a single full-bleed picture with a closing message on top.

ScrollTrigger intermediate
4 more details
pinningscrubstaggerscroll-storytelling

Released

About this effect

Your picture starts in pieces. Nine to twelve tiles, all crops of the same photograph, float across the stage at different sizes and small angles with the headline set between them. Scrolling pulls them into register in waves: the tiles that frame the picture go home first, then the last ones slide over the headline and cover it, and the seams close into one uninterrupted full-bleed photograph.

Read the full effect overview

A closing heading and a sentence or two then arrive over the finished picture, and the pin releases into normal scrolling with no jump. The whole passage is scrubbed, so it runs the same forwards and backwards. Put any image or muted looping video in the media slot, and use it as often as you like on a page: each copy works on its own.

Image Tile Assemble - GSAP animation effect preview

What's included

10 items
  • One photograph or video, cut live into its own crops, with nothing extra to prepare or export
  • Tiles arrive in overlapping waves, each rotating and scaling into place and running slightly past its mark before it settles
  • Every tile answers the first pixel of scroll, so the section feels alive before the first wave leaves
  • The headline sits above the tiles while they gather, then the last tiles slide across and cover it, with no fade
  • Lands with no seam: at the end the visitor sees the one real picture at 1:1, exactly full bleed at any viewport shape
  • Takes an img or a muted looping video in the media slot, and a video keeps playing inside the moving tiles
  • Closing heading and text arrive over the finished picture on a scrim measured for readable contrast
  • Four data attributes tune pin distance, scrub smoothing, columns and rows
  • Phones get fewer, bigger tiles and a shorter pin, and resizing rebuilds the scatter without losing your place
  • Reduced-motion, no-JS and blocked-CDN visitors get the full-bleed picture with all text visible and no pin

Perfect for

5 use cases
  • Flower farms, vineyards and pick-your-own pages where one aerial photograph is the whole pitch
  • Destination and travel pages that build a place up from fragments before showing all of it
  • Photography and portfolio stories that tease details of an image before the full frame
  • Product launches that assemble the hero shot, then land the announcement on top of it
  • Long home pages that repeat it as chapters, each with its own picture, headline and closing line

How it works

2 sections

A pinned ScrollTrigger scrubs one timeline across the section. The script reads the picture in your media slot, cuts it into a grid of crops with uneven seams, and composes a scatter in the open ground around the headline, so the first frame stays balanced whatever you set the grid to.

Each tile then has its own timing and a settle at the end of its trip. Tiles that end up over the headline stack above it from the start, which is what lets them cover it without a fade. When the last tile lands, the real, unscaled picture takes over, so the final frame carries no seams and no resampling. Touch devices get a shorter pin, and reduced-motion visitors a static layout.

Plugins ScrollTrigger
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick Start

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add before the closing </body> tag:

In your downloadThe working code for this step, in index.html.

3. Add the section anywhere in your <body>:

In your downloadThe working code for this step, in index.html.

That is the whole setup. The tiles are generated from whatever is in the media slot, so there are no crops to prepare.

Using It With Your Own Design

What the effect needs from your markup: .ita is the root and holds the options. .ita__stage is what gets pinned. .ita__media is the picture, and .ita__headline is required. .ita__scrim, .ita__payoff-heading and .ita__payoff-body are optional, and the section still works without them. Everything is scoped to its own .ita, so you can place as many sections on a page as you like, each with its own picture, copy and options.

Any image or video goes in the media slot. Keep the ita__media class on the element:

In your downloadThe working code for this step, in index.html.

A video keeps playing inside the moving tiles and takes over outright when they land. It must be muted to autoplay, and a poster fills the tiles until its first frame is ready. For responsive images, put class="ita__media" on the <img> inside a <picture>.

Cropping: the tiles use the same crop as the picture, so object-position on .ita__media moves both. Set it to keep your subject in frame, with a different value on phones if it needs one. The demo does this with a media query.

What is only the demo's styling: the font, the --ita-ground and --ita-ink colours, and the type sizes. Change them freely. Fewer words make a bigger headline: the scatter is composed around the headline's real size, so a very long one leaves less room for the tiles.

CSS the effect depends on:

  • The .has-js block in style.css holds the scattered start state. The base rules are the finished state, which is what no-JS and reduced-motion visitors see, so keep the headline and payoff readable there too.
  • .ita__tiles must not create a stacking context (no transform, opacity or z-index on it). Each tile stacks above or below the headline individually.
  • Keep the z-index order on the stage: tiles and headline up to about 200, then the media, scrim and payoff above them.
  • The media must stay position: absolute, full size and object-fit: cover, with no transform. That is what makes the landing exact.

Contrast on your own picture: white payoff text sits on .ita__scrim. The default scrim clears 4.5:1 on a very bright picture at the demo's text length. If your closing text runs taller, raise the scrim's second colour stop in the .has-js block so it still covers the top of the heading.

Options

Set these on the .ita element.

Attribute Values Default Description
data-ita-distance 60 to 1200 260 Pin distance as a percentage of the viewport height. Touch devices use 72 percent of this.
data-ita-scrub Seconds, or true 0.7 Scrub smoothing. true follows the scrollbar exactly.
data-ita-columns 1 to 10 4 Tiles per row. Phones use at most 2.
data-ita-rows 1 to 8 3 Rows of tiles. Phones use at most 3.

Nine to sixteen tiles read best. Past that the scatter gets crowded around the headline.

Teardown

The effect removes its tiles, pins, listeners and inline styles when you revert its context, which is what a single-page app should do when leaving the page:

In your downloadThe working code for this step, in script.js.

Other animations on your page are left alone.

Accessibility

  • Reduced motion: visitors get the picture full bleed with the headline and payoff visible, no scatter and no pin. A video in the slot is paused. Changing the preference while the page is open switches over cleanly.
  • No JavaScript or a blocked CDN: the same static layout.
  • Screen readers: the headline and payoff are real headings that stay in the document, the tiles are aria-hidden, and the picture's alt is read once.
  • Touch: normal page scrolling with a shorter pin and fewer, bigger tiles.

Dependencies

Required:

  • GSAP 3.12+ (the demo is built against 3.15.0)
  • ScrollTrigger plugin

No build step and no other libraries.

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

£7