Version-sensitive. Every API name, SDK gate and browser-support claim below was verified on 2026-09-08 against primary sources. What against, and when, is in _jutsu/VERSIONS.md. If that date is old, re-verify before acting on a version number.

CSS Native - Zero-Dependency Animations & Visual Techniques

When to Use CSS Native vs Library

Situation	Decision
< 3 animations on the page	CSS native
Scroll-driven reveal/parallax	CSS native (animation-timeline), always inside @supports (animation-timeline: scroll()) with the content visible by default - Firefox only since 159 (Oct 2026), Safari only since 26
Enter/exit from display: none	CSS native (@starting-style + transition-behavior: allow-discrete)
Tooltip/popover positioning	CSS native (anchor positioning)
Page transitions (MPA or SPA)	CSS native (View Transitions API)
Complex multi-step timeline (5+ tweens)	GSAP
Stagger across dynamic list (unknown count)	CSS native (animation-delay: calc(sibling-index() * 60ms)), Baseline since Aug 2026. Reach for a library only if the stagger has to be interrupted or re-sequenced at runtime
Physics-based spring with interruption	Framer Motion
Morph between SVG shapes	GSAP MorphSVG

Rule of thumb: if you can express it in a @keyframes + one animation-timeline, stay in CSS. The moment you need imperative control, sequence coordination, or runtime values - reach for a library.

---

Scroll-Driven Animations

Scroll Progress Timeline

Animate based on scroll position of a container.

.progress-bar {
  animation: grow-width linear both;
  animation-timeline: scroll(root block);
}

@keyframes grow-width {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

• scroll(<scroller> <axis>) - scroller: nearest | root | self, axis: block | inline | x | y
• Default: scroll(nearest block)

View Progress Timeline