Editorial review: Document scroll-triggered animations

[chrisdavidmills]

Description

Chrome 146 adds support for scroll-triggered animations; see https://chromestatus.com/feature/5181996801982464.

This PR adds documentation for this new feature, including:

• A module page for the new Animation triggers module.
• A guide that explains and demonstrates all the important sub-features.
• Ref page for the animation-trigger property.
• Ref page for the <animation-action> type.
• Ref page for the trigger-scope property.
• Ref page for the timeline-trigger shorthand property.
• Ref page for the timeline-trigger-name property.
• Ref page for the timeline-trigger-source property.
• Ref page for the timeline-trigger-activation-range shorthand property.
• Ref page for the timeline-trigger-activation-range-start property.
• Ref page for the timeline-trigger-activation-range-end property.
• Ref page for the timeline-trigger-active-range shorthand property.
• Ref page for the time-trigger-active-range-start property.
• Ref page for the time-trigger-active-range-end property.

Motivation

Additional details

Related issues and pull requests

[github-actions]

Preview URLs (18 pages)

• /en-US/docs/Web/CSS/Guides/Animation_triggers/Using_scroll-triggered_animations
• /en-US/docs/Web/CSS/Guides/Animation_triggers
• /en-US/docs/Web/CSS/Guides/Animations
• /en-US/docs/Web/CSS/Guides/Scroll-driven_animations
• /en-US/docs/Web/CSS/Reference/Properties/animation-trigger
• /en-US/docs/Web/CSS/Reference/Properties/animation
• /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-activation-range-end
• /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-activation-range-start
• /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-activation-range
• /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-active-range-end
• /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-active-range-start
• /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-active-range
• /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-name
• /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-source
• /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger
• /en-US/docs/Web/CSS/Reference/Properties/trigger-scope
• /en-US/docs/Web/CSS/Reference/Values/animation-action
• /en-US/docs/Web/CSS/Reference/Values/timeline-range-name

Flaws (14)

Note! 5 documents with no flaws that don't need to be listed. 🎉

Found an unexpected or unresolvable flaw? Please report it here.

URL: /en-US/docs/Web/CSS/Guides/Animation_triggers/Using_scroll-triggered_animations
Title: Using CSS scroll-triggered animations
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/animation-trigger
Title: animation-trigger CSS property
Flaw count: 2

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/scroll-driven_animations is ill cased
• macros:
  • Macro cssxref produces link /en-US/docs/Web/CSS/specificity which is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger
Title: timeline-trigger CSS property
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-activation-range
Title: timeline-trigger-activation-range CSS property
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-activation-range-end
Title: timeline-trigger-activation-range-end CSS property
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-activation-range-start
Title: timeline-trigger-activation-range-start CSS property
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-active-range
Title: timeline-trigger-active-range CSS property
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-active-range-end
Title: timeline-trigger-active-range-end CSS property
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-active-range-start
Title: timeline-trigger-active-range-start CSS property
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-name
Title: timeline-trigger-name CSS property
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/timeline-trigger-source
Title: timeline-trigger-source CSS property
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Properties/trigger-scope
Title: trigger-scope CSS property
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

---

URL: /en-US/docs/Web/CSS/Reference/Values/animation-action
Title: <animation-action>
Flaw count: 1

• broken_links:
  • Link /en-US/docs/Web/CSS/Guides/Animation_triggers/ is a redirect

External URLs (2)

URL: /en-US/docs/Web/CSS/Guides/Animation_triggers
Title: CSS animation triggers

• https://developer.chrome.com/blog/scroll-triggered-animations (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Web/CSS/Guides/Animation_triggers/Using_scroll-triggered_animations
Title: Using CSS scroll-triggered animations

• https://developer.chrome.com/blog/scroll-triggered-animations (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2026-09-09 14:11:47)