Build: The Product Grid Reveal

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

reveal

Showing content with an entrance animation when it first comes into view.

IntersectionObserver

A browser object that tells your code when an element enters or leaves the visible part of the page.

progressive enhancement

Building the page so it works without the extra feature, then adding the feature on top for browsers that can use it.

transitionend

The event a transition fires when it finishes, once per property.

1. 1

   Watch the wave

   In "The reveal and its fallbacks" press Replay, pause and step. Measured 150 ms after Replay: card 1 is at opacity 0.99, card 3 at 0.52 (6.8 px of 14 still to rise) and card 6 has not started (it starts at 300 ms). Everything is at 1 by 520 ms.

2. 2

   Switch the system setting

   Switch on Reduced motion in the timeline. The six cards show with opacity 1 and no transform at the first frame, and no tracks exist.

Your lumen-motion project after this topic. Click a file to see it in full.

/* tokens.css: Lumen's motion tokens. One place for durations and easings, so every component speaks the same language.
   Phase 2 starts this file; later phases add springs and delays. Never rename a token: components depend on the names. */
:root {
  /* durations (the Nielsen Norman Group ladder, Topic 2.4) */
  --dur-fast: 120ms; /* feedback: a press, a hover colour */
  --dur-base: 220ms; /* most things: toasts, panels, dialogs entering */
  --dur-slow: 400ms; /* large movement: a drawer across the screen */

  /* easings (Topic 5.3 explains the choices) */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* things arriving */
  --ease-in: cubic-bezier(0.55, 0, 1, 0.45); /* things leaving */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* things moving between two places on screen */
  /* ── Phase 5: choreography ── */
  --stagger-step: 60ms; /* gap between neighbours in a reveal; main.js caps how many steps count */
  /* ── end Phase 5 ── */
}

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves (Ama's and Mei's problem): the six accessory cards appear in one frame and the page feels abrupt. Mei's storyboard: each card 60 ms after the last, 300 ms of stagger at most, with the Phase 2 tokens.

2. 2

   What it adds, and how it plugs in. tokens.css gets --stagger-step: 60ms. components.css gets a marked Phase 5 block: cards are hidden only under .grid.reveal, shown with .in, and use --dur-base, --ease-out and transition-delay: calc(var(--i, 0) * var(--stagger-step)). main.js numbers the cards with Math.min(i, 5), then adds .reveal, and an IntersectionObserver adds .in when the grid scrolls into view.

3. 3

   Why the class comes from JavaScript. If the hiding rule applied to every .card, a visitor whose script failed to load, or who has an old browser, would see an empty grid for ever. Here .reveal is added last, after the observer is watching. Without JavaScript, without IntersectionObserver, or with reduced motion (checked with matchMedia, and again in a CSS media query), the class is never added and the cards just show.

4. 4

   Clean-up after the show. The delay stays on each card while .in is set, so any later transition on a card (a hover, in a later phase) would wait too. When the last card's transitionend fires, main.js adds .done, and .done sets the delay back to 0.

5. 5

   What the launch site can do now that it could not before: the accessories arrive in a calm, ordered wave (the last card is done after 520 ms), still in one frame for anyone who needs it. What is still missing: the toggle that lets a visitor override the system setting (Phase 7), the cart bump (Phase 8) and the gallery filter motion (Phase 10). If the visitor changes the system setting while the page is open, the reveal does not react; Phase 7 adds that.

• The cards arrive one after another when you scroll to them

• With JavaScript off the grid shows at once

• With reduced motion the grid shows at once with no movement

• The stagger never exceeds 300 ms