I wanted sections to fade and rise as they enter the viewport, but every prompt result either used a heavy IntersectionObserver soup or animated top/margin and made the scroll stutter on a mid-range phone.
What finally worked was asking for the native animation-timeline: view() approach with a strict allowlist of animatable properties (transform + opacity only) and a real prefers-reduced-motion branch that shows everything immediately. No layout-triggering properties, no libraries.
Is anyone shipping view() in production yet, or do you still gate it behind an @supports + observer fallback?
Write CSS for scroll-triggered entrance animations using the native scroll-driven animations API. Constraints:
- Use `animation-timeline: view()` with `animation-range: entry 0% cover 30%`. No JavaScript, no IntersectionObserver.
- Only animate `transform` (translateY 16px -> 0) and `opacity` (0 -> 1). Banned: animating top/left/margin/height/width/filter or anything that triggers layout or paint on scroll.
- Easing must be an explicit `cubic-bezier(0.22, 1, 0.36, 1)` (ease-out-back-ish), not a keyword.
- Wrap the whole thing so that inside `@media (prefers-reduced-motion: reduce)` the animation is removed and elements are fully visible with no transform.
- Add an `@supports (animation-timeline: view())` guard; outside it, elements are visible by default (no hidden content if the feature is missing).
Comment each block. Explain in one line why translate+opacity are GPU-cheap.