Scroll animation: cost, frame delivery and bundle size

Matching boxes and scroll progression across three engines, including idiomatic and batched GSAP. The interactive test adds synthetic app work to probe headroom. A steady average FPS does not exclude expensive frames. Keep the tab visible. CPU throttling is a synthetic experiment, not a substitute for testing the client's phone.

Total CPU and frame delivery

Three ScrollVars rows. The plain one is the default: the document outputs --sv-page/--sv-v publish only when a stylesheet reads them, and nothing here does. The styles/scoped.css row is the opt-in that stops the clocks inheriting (README, Scoped clocks), run with the two author lines its contract asks of this fixture: it pays on this flat profile and wins on the deep one below. The "document variables published" row is what the two document outputs cost when a page reads them, not a competitor comparison. Use the batched GSAP row when comparing one tracker per section. Small bundles do not guarantee lower CPU.

Measured by the committed harness (demo/bench/harness. Clone the repo, cd demo/bench/harness && npm i && npm run measure): Chrome 152.0.7977.85, median of 3 runs, engine order rotated per repetition. Measured 2026-09-10T23:55:45.351Z; package 1.16.1, commit 24b4f2020eac7387c9cc82d9477abd0c0a9231ef. Viewport 800×600. CPU totals accumulate over 12 seconds; they are not per-frame times. Startup is separate; scroll intervals are never filtered. Style cells show median (min–max). Raw runs and source hashes: results/latest.json.

The style-recalc curve (the honest cost of the CSS-variable mechanism)

Every box gets a realistic subtree (?deep=N spans with distinct selectors). A GSAP tween writes a transform on the box, so its cost does not depend on what the box contains; a custom property inherits, so every write re-resolves the box's whole subtree, and styles/scoped.css stops that at the readers. Compare document-wide writes, local writes and batched GSAP: 150 boxes, medians. Historical snapshot: 2026-09-10T23:55:45.351Z, package 1.16.1; raw results. A newer main comparison does not update this snapshot.

Low-end profile (4× synthetic CPU throttle; not a physical phone)

Measured 2026-09-11T04:00:01.804Z; package 1.16.1, 5 runs. Headed Chrome; compare engines within this profile, not as a multiplier of the headless table. Fixed-work calibration ratios are in the raw results.

Raw: results/throttled-4x.json.

An app-shaped page (what the library adds to a page that lives)

Measured 2026-09-11T04:08:34.653Z, 3 runs, order rotated. Generated by harness/app-shaped.mjs: a sticky header, a hero with entrance presets, a card grid with stagger, a parallax band, a feed of forty tracked items, a stream that mounts and unmounts rows every 250ms while the page scrolls, a route change at six seconds that replaces the grid and the feed, and a 5000-rule stylesheet. Same 12-second scroll as the tables above; the difference between the first row and the others is what the library costs here, animations included. The scoped row is gated: it rendered the same as the default at every sampled scroll position before its time counted.

Raw: results/app-shaped.json.

Real gallery sections (page outputs off)

Each complete generated page at 800×600, including gallery UI and any responsive fit-to-flow fallback. These are workload checks, not competitor comparisons or device guarantees. Historical snapshot: 2026-09-10T23:55:45.351Z, package 1.16.1; raw results.

Inherited variables can make large subtrees expensive. Keep continuous clocks close to their consumers; prefer native view timelines for compatible effects. Interpret script, style, total work and frame stalls together.