How United in Football pins its chapters

The tempting way to build a scroll story is a single master timeline covering the whole page. It works until the first revision: every duration is relative to everything else, so changing one scene reflows every label after it. United in Football scopes one GSAP timeline to one pinned chapter instead. Each chapter owns its trigger, its pin, and its scrub, and chapters know nothing about each other.

That isolation is what makes the site rebrandable, which is the point of buying it as source. Swap the media and copy inside one chapter and the others cannot break, because nothing crosses the chapter boundary except the scroll position.

Every animated element in the build moves with transform and opacity. Nothing animates top, left, width or height, because those properties invalidate layout, and a layout pass on every scroll frame is how a 60fps story becomes a 25fps slideshow on a mid-range laptop.

The kinetic typography sequences look like text being resized and reflowed, but they are scale and translate on pre-laid-out elements. The masked media reveals work the same way: the mask is a clip-path or an overflow container, and what moves inside it is a transform.

The build runs Lenis for smooth scrolling and GSAP ScrollTrigger for the pinned scenes, and the two must not each run their own animation-frame loop. Two loops sample the scroll position at slightly different times, which reads as jitter exactly where the site is supposed to feel most expensive.

So Lenis is driven from the GSAP ticker: one clock, one sample of the scroll position per frame, and ScrollTrigger reads a value that can never disagree with what Lenis just painted.

The art direction is composed at a 1470px reference viewport and collapses deliberately below it. Pinned scroll scenes are a desktop grammar; on a phone they mostly produce a long stretch of nothing between two frames, so the mobile layout collapses rather than shrinks. The scroll sections also check prefers-reduced-motion, so the story still reads for people who opt out of the choreography.

The dependency list is part of the design too: no paid libraries anywhere in the build, so there is nothing to license after you buy it and nothing that expires.

Start with the chapter that pins and scrubs a timeline, because every other chapter is a variation of it. Then read the ticker wiring that joins Lenis to GSAP, which is short but load-bearing. After those two, the kinetic type and masked reveals are recognisable patterns repeated with different targets, and rebranding the site is mostly a matter of replacing what the timelines point at.