Technical review: Document scroll-triggered animations

files/en-us/web/css/guides/animation_triggers/index.md

@@ -0,0 +1,64 @@
+---
+title: CSS animation triggers
+short-title: Animation triggers
+slug: Web/CSS/Guides/Animation_triggers
+page-type: css-module
+spec-urls: https://drafts.csswg.org/animation-triggers-1/
+sidebar: cssref
+---
+
+The **CSS animation triggers** module provides functionality for triggering standard time-based [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) when a particular trigger occurs, such as the user scrolling an element to a certain scroll offset inside the viewport, or a JavaScript event firing on an element.
+
+## Reference
+
+### Properties
+
+- {{cssxref("animation-trigger")}}
+- {{cssxref("timeline-trigger")}} shorthand
+- {{cssxref("timeline-trigger-activation-range")}} shorthand
+  - {{cssxref("timeline-trigger-activation-range-end")}}
+  - {{cssxref("timeline-trigger-activation-range-start")}}
+- {{cssxref("timeline-trigger-active-range")}} shorthand
+  - {{cssxref("timeline-trigger-active-range-end")}}
+  - {{cssxref("timeline-trigger-active-range-start")}}
+- {{cssxref("timeline-trigger-name")}}
+- {{cssxref("timeline-trigger-source")}}
+- {{cssxref("trigger-scope")}}
+
+The CSS animation triggers module level 1 also introduces the `event-trigger`, `event-trigger-name`, and `event-trigger-source` properties. Currently, no browsers support these features.
+
+### Data types and values
+
+- {{cssxref("<animation-action>")}}
+
+## Guides
+
+- [Using CSS scroll-triggered animations](/en-US/docs/Web/CSS/Guides/Animation_triggers/Using_scroll-triggered_animations)
+  - : A guide to implementing CSS scroll-triggered animations.
+
+## Related concepts
+
+- [CSS animations](/en-US/docs/Web/CSS/Guides/Animations) module
+  - {{cssxref("animation-timeline")}}
+  - {{cssxref("@keyframes")}} at-rule
+  - [`<keyframe-selector>`](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors)
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module
+  - {{cssxref("animation-range")}} shorthand
+    - {{cssxref("animation-range-end")}}
+    - {{cssxref("animation-range-start")}}
+  - {{cssxref("scroll-timeline")}} shorthand
+    - {{cssxref("scroll-timeline-axis")}}
+    - {{cssxref("scroll-timeline-name")}}
+  - {{cssxref("timeline-scope")}}
+  - {{cssxref("view-timeline")}} shorthand
+    - {{cssxref("view-timeline-axis")}}
+    - {{cssxref("view-timeline-inset")}}
+    - {{cssxref("view-timeline-name")}}
+
+## Specifications
+
+{{Specifications}}
+
+## See also
+
+- [CSS scroll-triggered animations are coming!](https://developer.chrome.com/blog/scroll-triggered-animations) on developer.chrome.com (2025)

files/en-us/web/css/guides/animations/index.md

@@ -245,8 +245,6 @@ Click "Play" in the example above to see or edit the code for the animation in t
 - {{cssxref("animation-timeline")}}
 - {{cssxref("animation-timing-function")}}
 
-The CSS animations module level 2 also introduces the `animation-trigger`, `animation-trigger-exit-range`, `animation-trigger-exit-range-end`, `animation-trigger-exit-range-start`, `animation-trigger-range`, `animation-trigger-range-end`, `animation-trigger-range-start`, `animation-trigger-timeline`, and `animation-trigger-type` properties. Currently, no browsers support these features.
-
 ### At-rules and descriptors
 
 - {{cssxref("@keyframes")}}
@@ -280,6 +278,30 @@ All animations, even those with 0 seconds duration, throw animation events.
 
 ## Related concepts
 
+- [CSS animation triggers](/en-US/docs/Web/CSS/Guides/Animation_triggers) module
+  - {{cssxref("animation-trigger")}}
+  - {{cssxref("timeline-trigger")}} shorthand
+  - {{cssxref("timeline-trigger-activation-range")}} shorthand
+    - {{cssxref("timeline-trigger-activation-range-end")}}
+    - {{cssxref("timeline-trigger-activation-range-start")}}
+  - {{cssxref("timeline-trigger-active-range")}} shorthand
+    - {{cssxref("timeline-trigger-active-range-end")}}
+    - {{cssxref("timeline-trigger-active-range-start")}}
+  - {{cssxref("timeline-trigger-name")}}
+  - {{cssxref("timeline-trigger-source")}}
+  - {{cssxref("trigger-scope")}}
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module
+  - {{cssxref("animation-range")}} shorthand
+    - {{cssxref("animation-range-end")}}
+    - {{cssxref("animation-range-start")}}
+  - {{cssxref("scroll-timeline")}} shorthand
+    - {{cssxref("scroll-timeline-axis")}}
+    - {{cssxref("scroll-timeline-name")}}
+  - {{cssxref("timeline-scope")}}
+  - {{cssxref("view-timeline")}} shorthand
+    - {{cssxref("view-timeline-axis")}}
+    - {{cssxref("view-timeline-inset")}}
+    - {{cssxref("view-timeline-name")}}
 - {{cssxref("will-change")}} CSS property
 - {{cssxref("easing-function")}} data type
 - [`prefers-reduced-motion`](/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-reduced-motion) media query
@@ -291,7 +313,7 @@ All animations, even those with 0 seconds duration, throw animation events.
 
 ## See also
 
-- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module.
+- [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) module
 - Properties in the [transitions](/en-US/docs/Web/CSS/Guides/Transitions) CSS module to trigger animations based on user actions.
 - The {{cssxref("interpolate-size")}} property and {{cssxref("calc-size()")}} function for enabling animations to and from [intrinsic size values](/en-US/docs/Glossary/Intrinsic_Size).
 - The {{htmlelement("canvas")}} HTML element along with [canvas API](/en-US/docs/Web/API/Canvas_API) and [WebGL API](/en-US/docs/Web/API/WebGL_API) to draw graphics and animations.

files/en-us/web/css/guides/scroll-driven_animations/index.md

@@ -148,6 +148,18 @@ Scroll the element in the inline direction to see its background color change. S
   - {{cssxref("animation-timeline")}}
   - {{cssxref("@keyframes")}} at-rule
   - [`<keyframe-selector>`](/en-US/docs/Web/CSS/Reference/Selectors/Keyframe_selectors)
+- [CSS animation triggers](/en-US/docs/Web/CSS/Guides/Animation_triggers) module
+  - {{cssxref("animation-trigger")}}
+  - {{cssxref("timeline-trigger")}} shorthand
+  - {{cssxref("timeline-trigger-activation-range")}} shorthand
+    - {{cssxref("timeline-trigger-activation-range-end")}}
+    - {{cssxref("timeline-trigger-activation-range-start")}}
+  - {{cssxref("timeline-trigger-active-range")}} shorthand
+    - {{cssxref("timeline-trigger-active-range-end")}}
+    - {{cssxref("timeline-trigger-active-range-start")}}
+  - {{cssxref("timeline-trigger-name")}}
+  - {{cssxref("timeline-trigger-source")}}
+  - {{cssxref("trigger-scope")}}
 - [CSS overflow](/en-US/docs/Web/CSS/Guides/Overflow) module
   - {{glossary("Scroll container")}}
   - [Scrollport](/en-US/docs/Glossary/Scroll_container#scrollport)
@@ -164,4 +176,5 @@ Scroll the element in the inline direction to see its background color change. S
 
 ## See also
 
+- [Using CSS scroll-triggered animations](/en-US/docs/Web/CSS/Guides/Animation_triggers/Using_scroll-triggered_animations)
 - [Animate elements on scroll with scroll-driven animations](https://developer.chrome.com/docs/css-ui/scroll-driven-animations) via developer.chrome.com (2023)