Editorial review: Document scroll-triggered animations by chrisdavidmills · Pull Request #43158 · mdn/content

chrisdavidmills · 2026-02-18T16:51:21Z

Description

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

This PR adds documentation for this new feature, including:

Motivation

Additional details

Related issues and pull requests

github-actions · 2026-02-18T16:53:16Z

Preview URLs (18 pages)

Flaws (15)

Note! 16 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/Reference/Properties/animation
Title: animation
Flaw count: 1

broken_links:
- Link /en-US/docs/Web/CSS/Reference/Values/number-token doesn't resolve

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

macros:
- Macro cssinfo produces link /en-US/docs/Web/CSS/timeline-trigger-range-start which doesn't resolve
- Macro cssinfo produces link /en-US/docs/Web/CSS/timeline-trigger-range-end which doesn't resolve
- Macro cssinfo produces link /en-US/docs/Web/CSS/timeline-trigger-exit-range-start which doesn't resolve
- Macro cssinfo produces link /en-US/docs/Web/CSS/timeline-trigger-exit-range-end which doesn't resolve
- Macro cssinfo produces link /en-US/docs/Web/CSS/timeline-trigger-range which doesn't resolve
- and 9 more flaws omitted

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-04-10 12:10:02)

bramus

I’m halfway through reviewing but already submitting my comments as I see there are some terms that are getting used in places where they should not be.

The themes I am seeing, where wrong names are use:

A trigger vs an animation becoming active / inactive: it is the trigger that becomes active / inactive. Animations will do something (play, pause, etc) in response to that trigger becoming active / inactive.
An element being a trigger vs a ViewTimeline being a trigger: it is the ViewTimeline that is the trigger, not the element itself.

I’m seeing these terms (trigger / animation / element) get mixed up through all files I reviewed.

Files I did not review, but most likely also have this mixup:

files/en-us/web/css/reference/properties/timeline-trigger-active-range-end/index.md
files/en-us/web/css/reference/properties/timeline-trigger-activation-range/index.md
files/en-us/web/css/reference/properties/timeline-trigger-active-range-start/index.md
files/en-us/web/css/reference/properties/timeline-trigger-active-range/index.md
files/en-us/web/css/reference/properties/timeline-trigger-name/index.md
files/en-us/web/css/reference/properties/timeline-trigger-source/index.md
files/en-us/web/css/reference/properties/timeline-trigger/index.md
files/en-us/web/css/reference/properties/trigger-scope/index.md

All other files I have reviewed, and left suggestions that you can immediately apply.

I can do a second review round later, but currently I’m overly busy with some other things.

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

files/en-us/web/css/reference/properties/timeline-trigger-activation-range/index.md

…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>

…ex.md Co-authored-by: Bramus <bramus@bram.us>

…vation-range-end/index.md Co-authored-by: Bramus <bramus@bram.us>

Co-authored-by: Bramus <bramus@bram.us>

…vation-range-start/index.md Co-authored-by: Bramus <bramus@bram.us>

…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>

estelle

didn't get very far. committing what i have thus far.

estelle · 2026-04-09T15:19:09Z

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

+- {{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.


Suggested change

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.

The CSS animation triggers module also introduces the `event-trigger`, `event-trigger-name`, and `event-trigger-source` properties. Currently, no browsers support these features.

estelle · 2026-04-09T16:24:26Z

files/en-us/web/css/reference/properties/animation/index.md


 > [!NOTE]
-> {{cssxref("animation-timeline")}}, {{cssxref("animation-range-start")}}, and {{cssxref("animation-range-end")}} are not currently included in this list, as current implementations are reset-only. This means that including `animation` resets a previously-declared `animation-timeline` value to `auto` and previously-declared `animation-range-start` and `animation-range-end` values to `normal`, but these properties cannot be set via `animation`. When creating [CSS scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations), you need to declare these properties after declaring any `animation` shorthand for it to take effect.
+> {{cssxref("animation-timeline")}}, {{cssxref("animation-range-start")}}, {{cssxref("animation-range-end")}} and {{cssxref("animation-trigger")}} are not currently included in this list, as current implementations are reset-only. This means that including `animation` resets a previously-declared `animation-timeline` value to `auto`, previously-declared `animation-range-start` and `animation-range-end` values to `normal`, and a previously-declared `animation-trigger` to `none`, but these properties cannot be set via `animation`. When creating CSS [scroll-driven animations](/en-US/docs/Web/CSS/Guides/Scroll-driven_animations) or [triggered animations](/en-US/docs/Web/CSS/Guides/Animation_triggers), you need to declare these properties after declaring any `animation` shorthand for them to take effect.


only animation-timeline is in the shorthand i think, so i don't think this resets the other properties. did you test?

estelle · 2026-04-09T16:26:51Z

files/en-us/web/css/reference/properties/timeline-trigger-activation-range-end/index.md

+/* Named timeline range value */
+timeline-trigger-activation-range-end: contain;
+timeline-trigger-activation-range-end: exit;
+timeline-trigger-activation-range-end: entry 100%;


separate the named-only and the named with offsets

estelle · 2026-04-09T16:26:59Z

files/en-us/web/css/reference/properties/timeline-trigger-activation-range-end/index.md

+timeline-trigger-activation-range-end: 80%;
+timeline-trigger-activation-range-end: 400px;
+
+/* Named timeline range value */


Suggested change

/* Named timeline range value */

/* Named timeline range */

estelle · 2026-04-09T16:28:07Z

files/en-us/web/css/reference/properties/timeline-trigger-activation-range-end/index.md

+
+```css
+/* Keyword or <length-percentage> */
+timeline-trigger-activation-range-end: normal;


let's break apart: put normal under a keyword -only header, and vals under a offset header

estelle · 2026-04-09T16:37:45Z

files/en-us/web/css/reference/properties/timeline-trigger-activation-range-end/index.md

+
+If the `<timeline-range-name>` value does not include a `<length-percentage>`, the percentage defaults to `100%`.
+
+The `timeline-trigger-activation-range-end`, along with the {{cssxref("timeline-trigger-activation-range-start")}} property, can both be set in a single declaration using the {{cssxref("timeline-trigger-activation-range")}} shorthand.


Suggested change

The `timeline-trigger-activation-range-end`, along with the {{cssxref("timeline-trigger-activation-range-start")}} property, can both be set in a single declaration using the {{cssxref("timeline-trigger-activation-range")}} shorthand.

The `timeline-trigger-activation-range-end` and {{cssxref("timeline-trigger-activation-range-start")}} properties can both be set in a single declaration using the {{cssxref("timeline-trigger-activation-range")}} shorthand.

estelle · 2026-04-09T16:41:46Z

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


- [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.


Suggested change

- Properties in the [transitions](/en-US/docs/Web/CSS/Guides/Transitions) CSS module to trigger animations based on user actions.

- [CSS animation triggers](/en-US/docs/Web/CSS/Guides/Animation_triggers) module

- [CSS transitions](/en-US/docs/Web/CSS/Guides/Transitions) module

estelle · 2026-04-09T16:43:13Z

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


 ## See also

+- [Using CSS scroll-triggered animations](/en-US/docs/Web/CSS/Guides/Animation_triggers/Using_scroll-triggered_animations)


i think we can add this to the guide list. What do you think?

estelle · 2026-04-09T16:44:22Z

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

+## 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.


I think we can add the animation timeline names guide here. What do you think?

estelle · 2026-04-09T16:46:57Z

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


 ## Related concepts

+- [CSS animation triggers](/en-US/docs/Web/CSS/Guides/Animation_triggers) module


triggers seems to expand scroll-driven, so we should invert these (i haven't read everything yet, so maybe wrong)

Document scroll-triggered animations

70194d0

chrisdavidmills requested a review from a team as a code owner February 18, 2026 16:51

chrisdavidmills requested review from hamishwillee and removed request for a team and hamishwillee February 18, 2026 16:51

github-actions bot added the Content:CSS Cascading Style Sheets docs label Feb 18, 2026

chrisdavidmills changed the title ~~Document scroll-triggered animations~~ Technical review: Document scroll-triggered animations Feb 18, 2026

github-actions bot added the size/xl [PR only] >1000 LoC changed label Feb 18, 2026

chrisdavidmills marked this pull request as draft February 18, 2026 16:51

chrisdavidmills added 13 commits February 18, 2026 17:38

tweak fallback styles and correct range property names

8901885

Merge branch 'main' into scroll-triggered-animations

60e1ccf

Add ref pages for animation-trigger and <animation-action>

4bd67a3

Merge branch 'main' into scroll-triggered-animations

60bbe5d

Add timeline-trigger-name and timeline-trigger-source

85c0e99

Merge branch 'main' into scroll-triggered-animations

cf303f0

Add timeline-trigger-activeation-range* properties

a233f42

Merge branch 'main' into scroll-triggered-animations

5c0d542

Improve reference descriptions

14f9cc6

Add timeline-trigger-active-range* ref pages

fd77657

Merge branch 'main' into scroll-triggered-animations

7519ba0

update page titles, add trigger-scope page

973031e

Add timeline-trigger shorthand page

c5598c7

chrisdavidmills marked this pull request as ready for review March 2, 2026 18:02

chrisdavidmills added 2 commits March 3, 2026 11:45

Add separate animation triggers module page

8041243

Update animation-action browser-compat reference

0628fc2

bramus reviewed Mar 5, 2026

View reviewed changes

chrisdavidmills and others added 3 commits March 10, 2026 09:25

Merge branch 'main' into scroll-triggered-animations

e75774c

Update animation-action BCD ref

03203ea

Update files/en-us/web/css/guides/animation_triggers/using_scroll-tri…

fa4d6b0

…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>

chrisdavidmills and others added 26 commits March 10, 2026 10:10

Update files/en-us/web/css/guides/animation_triggers/using_scroll-tri…

babef3b

…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/guides/animation_triggers/using_scroll-tri…

92b891d

…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/guides/animation_triggers/using_scroll-tri…

2161905

…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/guides/animation_triggers/using_scroll-tri…

885e38e

…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/guides/animation_triggers/using_scroll-tri…

b729f8c

…ggered_animations/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/animation-trigger/ind…

4d2e419

…ex.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/animation-trigger/ind…

eed4efa

…ex.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/animation-trigger/ind…

e902040

…ex.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/animation-trigger/ind…

8a59dd2

…ex.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/animation-trigger/ind…

d5db7eb

…ex.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/animation-trigger/ind…

6a65a83

…ex.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/animation-trigger/ind…

4695fe0

…ex.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/animation-trigger/ind…

670295e

…ex.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/animation-trigger/ind…

23193dd

…ex.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/timeline-trigger-acti…

47c1446

…vation-range-end/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/values/animation-action/index.md

43b1c16

Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/values/animation-action/index.md

d96df10

Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/timeline-trigger-acti…

fa54bee

…vation-range-start/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/timeline-trigger-acti…

c7c5a38

…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/timeline-trigger-acti…

f0b768e

…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/timeline-trigger-acti…

9073144

…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/timeline-trigger-acti…

6e10b85

…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/timeline-trigger-acti…

71eb3c9

…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>

Update files/en-us/web/css/reference/properties/timeline-trigger-acti…

5fb7af0

…vation-range/index.md Co-authored-by: Bramus <bramus@bram.us>

Fixes for bramus review comments

7e5d1e4

cut down multiple trigger names section

9432d70

chrisdavidmills changed the title ~~Technical review: Document scroll-triggered animations~~ Editorial review: Document scroll-triggered animations Apr 8, 2026

chrisdavidmills requested a review from estelle April 8, 2026 12:17

estelle reviewed Apr 9, 2026

View reviewed changes

Merge branch 'main' into scroll-triggered-animations

376a85a

	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.
	The CSS animation triggers module also introduces the `event-trigger`, `event-trigger-name`, and `event-trigger-source` properties. Currently, no browsers support these features.


		If the `<timeline-range-name>` value does not include a `<length-percentage>`, the percentage defaults to `100%`.

		The `timeline-trigger-activation-range-end`, along with the {{cssxref("timeline-trigger-activation-range-start")}} property, can both be set in a single declaration using the {{cssxref("timeline-trigger-activation-range")}} shorthand.

	- Properties in the [transitions](/en-US/docs/Web/CSS/Guides/Transitions) CSS module to trigger animations based on user actions.
	- [CSS animation triggers](/en-US/docs/Web/CSS/Guides/Animation_triggers) module
	- [CSS transitions](/en-US/docs/Web/CSS/Guides/Transitions) module


		## See also

		- [Using CSS scroll-triggered animations](/en-US/docs/Web/CSS/Guides/Animation_triggers/Using_scroll-triggered_animations)


		## Related concepts

		- [CSS animation triggers](/en-US/docs/Web/CSS/Guides/Animation_triggers) module

Conversation

chrisdavidmills commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation

Additional details

Related issues and pull requests

Uh oh!

github-actions bot commented Feb 18, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bramus left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

estelle left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

chrisdavidmills commented Feb 18, 2026 •

edited

Loading

github-actions bot commented Feb 18, 2026 •

edited

Loading