Build: The Volt Scroll Story

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

reading bar

A thin bar at the top of the page that fills as the reader scrolls: a scroll-driven animation on scroll(root).

reveal

A feature that fades in and rises as it enters view: a view() animation over the entry range.

reveal-ready

A class that main.js puts on html once the fallback observer exists. The CSS hides cards only under it.

@supports not

A block that applies only in browsers that lack a feature: here the fallback's hidden state.

1. 1

   Force the fallback

   In main.js change CSS.supports("animation-timeline", "view()") to false. In a browser with view(), html now gets the class reveal-ready (measured), because the observer starts. The reveal itself is unchanged: its hidden state sits inside @supports not (animation-timeline: view()), which does not apply here. That is why the fallback has to be tested with the support flag passed in, as the first example does.

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

/* scroll.css (Phase 12): a reading bar, and features that fade in as they enter the screen.
   Both are enhancements: without scroll-driven animation the page is complete. main.js adds an observer fallback. */

/* ── Phase 12: the reading bar and the story ── */
.read-progress { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 40; pointer-events: none; }
.read-progress-bar { height: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }

.story { padding-bottom: 24px; }
.features { display: grid; gap: 28px; }
.feature { padding: 28px 20px; border-radius: 14px; background: #fff; border: 1px solid #0001; }
.feature h3 { margin: 0 0 6px; }
.feature p { margin: 0; }

@keyframes read-grow { to { transform: scaleX(1); } }
@keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } }

/* The native way: the scroll bar is the clock. Only where the browser understands it. */
@supports (animation-timeline: scroll()) {
  .read-progress-bar { animation: read-grow linear both; animation-timeline: scroll(root block); }
}
@supports (animation-timeline: view()) {
  /* No parallax: the feature only fades in and rises 24px, finishing when 60% of it has entered. */
  .feature.reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}

/* The fallback: main.js adds .reveal-ready and .is-visible where view() is missing. */
@supports not (animation-timeline: view()) {
  .reveal-ready .feature.reveal { opacity: 0; transform: translateY(24px); transition: opacity var(--dur-slow, 400ms) var(--ease-out, ease-out), transform var(--dur-slow, 400ms) var(--ease-out, ease-out); }
  .reveal-ready .feature.reveal.is-visible { opacity: 1; transform: none; }
}

/* Reduced motion, and the site toggle from Phase 7: everything above goes. The content and the page stay. */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion="full"]) :is(.feature.reveal, .read-progress-bar) { animation: none; }
  :root:not([data-motion="full"]) .read-progress { display: none; }
}
:root[data-motion="reduced"] :is(.feature.reveal, .read-progress-bar) { animation: none; }
:root[data-motion="reduced"] .read-progress { display: none; }
/* ── end Phase 12 ── */

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's request, closed): the specs were a list of folded boxes, and the launch page had no story. Now a thin orange bar fills as you read, and four features arrive one at a time, in CSS, with no scroll listener.

2. 2

   What it adds, and how it plugs in. scroll.css holds both effects, each inside @supports: .read-progress-bar uses scroll(root block) and .feature.reveal uses view() with animation-range: entry 0% entry 60%. No parallax: features only fade in and rise 24 px. index.html links the file before motion-safe.css, adds the bar as the first element of the body, a Story nav link and section#story. main.js gets the fallback block at the end. The files continue the project of Phases 9 and 10 (drawer, gallery), and the launch-page example shows them all running.

3. 3

   One class, two jobs. Phase 5 already puts .reveal on the product grid (.grid.reveal). A bare .reveal rule here would also animate and observe that grid (measured: 5 elements match .reveal, 4 match .feature.reveal), so every rule and the observer say .feature.reveal. Renaming Phase 5's class (say to .stagger) later is safe.

4. 4

   How it stays calm. Reduced motion and the Phase 7 toggle both switch everything off in CSS: animation: none on the bar and features, and the bar hidden. Measured: with the device asking for reduced motion, the bar is display: none and all four features have opacity 1. data-motion="reduced" does the same on any device, and data-motion="full" brings the effects back (Phase 7).

5. 5

   The fallback. Where view() is missing, main.js starts an IntersectionObserver (Topic 12.5) and adds reveal-ready to html only once it exists. It reveals once, counts a card above the screen as seen, and stops when motion is switched off. The bar has no fallback: older browsers show no bar and lose nothing.

6. 6

   What the launch site can do now: it tells the Volt's story as you scroll and shows how far you have read, in CSS where supported, with an observer where not, and plainly with reduced motion. What is still missing: the route that draws itself (Phase 13), a GSAP pinned battery section (Topic 14.7), the launch timeline (Phase 14) and the mascot (Phase 16).

• Your project has scroll.css, the bar, section#story and the fallback block in main.js

• The bar fills as you scroll and the features fade in

• With reduced motion, or the toggle on Reduced, the bar is gone and every feature is visible

• Without view() support the observer reveals the features, and stops when motion is switched off