Crown Holdings — Global Corporate Website

All the motion, none of the bloat

The big idea in the design was animation. Nearly everything on the homepage moves as you scroll: a hero transition, a plain can that bursts into color as you pass it, a tumbling can that walks you through company highlights, and one long top-to-bottom scroll sequence.

The first version was classic scroll-tweening JavaScript, recalculating every animation on every pixel of scroll. It looked great but worked the browser hard. So during refinement I rebuilt it as CSS class-based animations. JavaScript still watches the scroll, but now it only cares about a handful of trigger points. Cross one, and it flips a class; CSS takes it from there and does the actual animating.

Add in accessibility as a requirement from day one (not a patch at the end), and the payoff was a perfect launch: 100 in performance, accessibility, best practices and SEO, on both mobile and desktop.

Checking our own work

A perfect Lighthouse score only covers the pages you test. So two weeks after launch, I checked the whole site: 700+ URLs through Pa11y, with aXe as the test engine, against WCAG 2.1 AA. Then I turned the raw output into something people could act on, listing every issue type with its severity, the fix, the effort, the estimated hours and who owned it.

The results told a useful story. Only a handful were template problems: a table header with scope="column" instead of "col", a duplicated ID in the image block, and heading levels that skipped a step. Those were ours, and quick. Most of the rest lived in editor content (embedded videos without titles, empty links, lists that got mangled in the WYSIWYG editor) or on external sites the pages pulled in, where no template change could reach. Sorting out which was which let our developers and the client’s content team each take their own share.