Build: The Launch-Day Hero Timeline

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

label

A named time in the timeline (headline, volt, price) that tweens attach to, so one number retimes a whole group.

aria-busy

An attribute that tells assistive technology an element is still changing, so it waits for the final value.

pin spacer

The wrapper that keeps room for the pinned section's scroll distance.

bundle

The JavaScript a browser downloads.

1. 1

   Retime the Volt with one number

   In launch-timeline.js change .addLabel("volt", 0.5) to 0.3. The Volt and everything attached to volt and price moves 0.2 s earlier, and the duration printed by the example becomes 1.8 s.

2. 2

   Switch the site to Full while the device says reduce

   With the device set to reduced motion, choose Full in the footer. motionAllowed() now answers true and the timeline is built: the site's own choice wins, because the function checks motionAllowed() itself, not only the calm condition.

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

{
  "name": "lumen-motion",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "gsap": "3.15.0"
  },
  "devDependencies": {
    "vite": "8.3.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: Tomás wants a launch-day moment and Mei wants to retime it without asking for code. Ravi needs a page that is complete without motion and a headline that is still one sentence to his screen reader. One labelled timeline answers all three: Mei changes a label's time, and gsap.matchMedia() decides whether the sequence exists at all.

2. 2

   What it adds. launch-timeline.js exports launchTimeline(). With motion allowed it splits the h1 into masked words (aria: "auto" keeps the label), then builds one timeline: the words rise (label headline), the Volt slides in at volt (0.5 s), the price counts from €0 to €2,490 at price (1 s) with aria-busy set until it ends, and Reserve follows. The Volt's wrapper .hero-art moves, not the drawing: Phase 6's CSS drift on #volt-hero would override GSAP's x (measured: the Volt only faded). scroll-story-gsap.js pins #battery for 300 px from 700 px wide and only scrubs its meter on a phone. main.js calls both; package.json gains gsap 3.15.0, pinned.

3. 3

   How it plugs in. Both files use motionAllowed() and onMotionChange() from Phase 7: choose Reduced in the footer and the timeline is reverted, the headline whole and the price €2,490. initScrollStoryGsap() returns a cleanup function. The battery section sits right after the hero, because a pin near the end of a page can run out of page: it needs at least a screen of content after the section for the meter to finish (Topic 14.3).

4. 4

   What the launch site can do now: it opens with a sequence the designer retimes with one number per step, counts the price up without a screen reader hearing every number, pins a section on desktop and scrubs it plainly on a phone, and undoes all of this live when the motion setting changes. Measured with Vite 8.3.5: GSAP with SplitText and ScrollTrigger adds about 122 kB of JavaScript (about 48 kB gzipped).

5. 5

   What is still missing: the drawer and the gallery keep our own spring and FLIP helpers, not GSAP. Phase 15 builds the React configurator with Motion, and Phase 16 the headlight mascot. Phase 12's CSS story and this pin are alternatives: ship one per section. Motion tokens and tests come in Phase 18.

• You can say what each label in the hero timeline attaches

• You can show the page is complete with Reduced selected

• You know where a pinned section can and cannot start