Scroll Triggered Animations

concepts

1. Scroll Trigger

   Trigger CSS animations from scroll position without a JavaScript IntersectionObserver. The animation-trigger property accepts viewport-relative offsets.

2. Once vs Repeat

   Side-by-side columns: one fires its keyframes the first time only, the other re-fires on every re-entry. Different behaviours, one declaration, with a counter for each.

3. Range Gallery

   Four rows: cover, contain, entry, exit. Same keyframes, different animation-range — scroll and see when each fires across the viewport journey.

4. Staggered Entrance

   24-card grid where each card slides and fades in as it enters the viewport, with CSS-only stagger delays via nth-child. Adjust delay, duration, and range; falls back to IntersectionObserver gracefully.

5. Progressive Reveal

   A realistic article list with configurable entrance animations (slide, scale, blur-in). Swaps between animation-trigger: view() in Chrome 144 and an IntersectionObserver fallback elsewhere — with live controls for animation type, duration, and per-item stagger.

6. Parallax Sections

   Two animation systems on the same scroll: a continuous animation-timeline: scroll() parallax background that moves while you scroll, plus discrete animation-trigger: view() title entrances. Shows that scroll-driven (continuous) and scroll-triggered (discrete) are complementary tools.

why it shipped

Kicking off animations after having reached a desired scroll position is a common pattern on the web. Achieving this requires JavaScript to know when to trigger an animation. However, in many cases, all the information needed for many use cases can be declaratively specified. This feature provides authors a robust, reliable, performant and convenient way to set up such animations in response to scrolling.

references

• ChromeStatus entry
• Spec