#1167: WG New Spec: Scroll-Triggered Animations
Discussions
Log in to see TAG-private discussions.
Comment by @jyasskin Nov 19, 2025 (See Github)
We have a week before the Blink folks will approve this Intent to Ship: https://groups.google.com/a/chromium.org/g/blink-dev/c/TZLFLjzt4II/m/nzUrqB4CAwAJ
Discussed
Dec 1, 2025 (See Github)
Matthew and Serena: not yet
Jeffrey: this was approved by blinkdev to ship last week. There is still time for the working group to suggest changes, and then for the folks to make changes.
Lola: can we get to it soon, or should we reassign?
Matthew: I'll look at it tomorrow.
Serena: I'll have time this week.
Discussed
Dec 15, 2025 (See Github)
Matthew to post the comment.
Comment by @matatk Dec 17, 2025 (See Github)
Hi @DavMila, thanks for your review request.
We appreciate this is an increasingly used pattern, and it's important to help authors to get it right. On those lines, we have several concerns:
-
The robustness of this pattern on sites in general - e.g. when afforded by scripting - can be poor. For example: triggers firing the wrong number of times; things going wrong if the user scrolls back. Have you considered how these issues may be resolved through standardization?
-
Historically, all page content was loaded in and was available to ATs - it might just be off screen, but could be explored. If content is loaded dynamically in response to scrolling, this could exclude some users. (It doesn't seem like that's inherent here, but it seems like a pattern that may more prominently emerge following this.)
-
Scrolling and animation can cause huge cognitive issues (e.g. distracting, disorienting). We have
prefers-reduced-motionbut we're not sure how much consideration has been given to providing guidance for authors on how to ensure an equitable UX - especially in cases of complex animations revealing - or even themselves acting as - content. -
Does this interact with/affect the focus in any way?
There seems to be justification for an 'accessibility considerations' section, assuming ways to address these concerns are known, or could be found. APA WG would be happy to help by reviewing any content you might create for such a section.
We look forward to hearing your thoughts on the above.
Discussed
Jan 5, 2026 (See Github)
(Skipped.)
Discussed
Jan 12, 2026 (See Github)
Matthew: It looks like we’re waiting for input from them. We’ve been talking in APA and the Cognitive Accessibility …, they have additional considerations. We could put them on this thread or in the repo. Can point them out once it’s fully reviewed.
Discussed
Jan 19, 2026 (See Github)
Matthew: APA is working with cognitive accessibility tf, if anything comes up with cognitive accessibility we can bring it to this thread but for now we're waiting for external feedback from them.
Discussed
Jan 26, 2026 (See Github)
Matthew: Same as last week: APA and my feedback will be coming soon.
Discussed
Feb 2, 2026 (See Github)
Matthew: I think we posted on this yesterday. Think we’ll just say, I haven’t seen anything architectural, except for being very clear about the implications of using it. Makes it easier to build inaccessible, exclusive experiences. Takes things off the main thread, which we are usually happy about. I don’t think we need to add anything specific to the TAG response. Still working on the proposal with APA, but will send it separately, but that would go to the A11y section. Not to "stop it completely." Just waiting for an answer from them, and APA can file the issue separately.
Lola: Think I disagree with the "we shouldn’t say stop it," I think we should. But we can wait for them to come back before coming to a resolution.
Matthew: It’s labelled "pending external feedback." Shall I ping them?
Lola: You can do that.
Comment by @matatk Feb 5, 2026 (See Github)
Hi @DavMila, just wondering if you had any thoughts in response to our comment above?
Comment by @DavMila Feb 5, 2026 (See Github)
Hi @DavMila, just wondering if you had any thoughts in response to our comment above?
Hi @matatk, we discussed this shortly after your comment but I apologize for taking so long in getting back to this.
- The robustness of this pattern on sites in general - e.g. when afforded by scripting - can be poor. For example: triggers firing the wrong number of times; things going wrong if the user scrolls back. Have you considered how these issues may be resolved through standardization?
One of the choices we made was to leverage scroll timelines which were introduced along with scroll-driven animations. Timelines, via the ranges API, offer developers a robust way of referring to portions of a scroll container. To use the “user scrolls back” case mentioned as an example, timeline triggers are designed to allow authors specify two ranges - this means that for a given side of the scroll port, authors can separate the boundary at which scrolling forward fires the animation from the boundary at which scrolling backwards does. One of the use cases we prioritized simplifying was being able to specify the ranges as contain / cover which provides a separation of the trigger points so that on one end of the scroll port triggering only happens when the element comes fully into view or goes fully out of view.
We believe that this boundary separation, together with semantically connected “entry” and “exit” concepts (i.e. entry and exit must alternate) are likely to foster the development of UIs that are predictable and user-friendly.
- Historically, all page content was loaded in and was available to ATs - it might just be off screen, but could be explored. If content is loaded dynamically in response to scrolling, this could exclude some users. (It doesn't seem like that's inherent here, but it seems like a pattern that may more prominently emerge following this.)
I think our expectation is that use of this feature will apply to elements coming in and out of the viewport/scrollport, which are typically elements that are already loaded into the DOM.
- Scrolling and animation can cause huge cognitive issues (e.g. distracting, disorienting). We have
prefers-reduced-motionbut we're not sure how much consideration has been given to providing guidance for authors on how to ensure an equitable UX - especially in cases of complex animations revealing - or even themselves acting as - content.
We recognize that this is an important issue to consider and we think that this is something that developers should be considering in the context of animations in general. To this end, we noticed that the css-animation spec doesn’t have an accessibility section similar to the css-transitions spec. So, we are working on adding an accessibility section with a strong recommendation on prefers-reduced-motion. I think that one potential advantage of declarative scroll-triggered animations is the ability for the user agent to make modifications to the animations on a page according to the user’s needs. It might be more difficult for a user agent to do this with scripted scroll-triggered animations.
- Does this interact with/affect the focus in any way?
No, it doesn’t directly affect focus. In theory, it would be possible for an author to set up an animation that affects other CSS properties that, in turn, interact with focus , e.g. display. However, that’s true of animations today.
Discussed
Feb 9, 2026 (See Github)
Matthew: Looks positive b/c they work on an a11y section which we can have a look at APA. Was thinking about the robustness section, want to be the behavior more robust. Looks like they’ve considered that with scroll timelines, ranges API. Looks very promising, would respond with a positive comment.
Discussed
Feb 16, 2026 (See Github)
[Coming back to this from earlier in the meeting]
Lola: Left a comment on this in the private brainstorming, as they responded. Addressed our concerns quite well. Two things, 1) specifying the ranges using contain/cover. This is already used in other places which have to do with images. Good to use existing syntax, but could this be confusing for developers? Or is context enough? Want Matthew and Xiaocheng's thoughts there. 2) Concern about dynamically loading elements into the DOM which could cause problems with accessibility. This is their actual expectation for the API. That indicates to me that there is a possibility that this feature might not apply to elements already in the DOM.
Hadley: Did we ask that question?
Lola: Plan to do this now. Wait for Matthew to check that. Will continue whenever folks are back.
Hadley: Any time pressures?
Lola: Past the deadline.
Hadley: Might be worth asking Jeffrey if this is too late.
Lola: They have been engaging with us actively, they wrote their comment two weeks ago.
Discussed
Feb 23, 2026 (See Github)
Matthew: Proponents came back to our comment. Answered question about the DOM and they'll come back to it. Whether it effects focus: it doesn't. performance. The other is cognitive issues and animation could cause barriers, which APA and AG is looking at. The interesting thing is that they've identified there is no specific accessibility consideration for CSS animation, and so they're working on it. so there is a lot in common between two pieces of text which is a good sign. APA will work with them on that. When we / TAG comment, will point that out. Lola had a comment last week.
Lola: Had questions about, their response basically. They mentioned things that I wanted clarifying. They suggested using contain/cover, for separation between trigger points. Good to use established syntax, but contain/cover is used in a completely different context. This feels like going against work keywords already used. Similar issue with inert issue we had with CSS carousels. Maybe the context is different enough that it wouldn't be confusing, but I doubt it because it is still CSS.
The second is about wording. They say, whether elements are loaded dynamically or not. Elements coming in or out of the viewport, which are typically elements already loaded into hte DOM. I think our expectation is that we expect it to be done this but it might not be done this way. If the latter, it should be called or addressed.
Hadley: Did you ask these questions or we should?
Lola: I wanted to discuss in the group. Questions are in https://github.com/w3ctag/design-reviews-private-brainstorming/issues/223
Xiaocheng:
Matthew: If we can't readily find contain/cover use of those terms, we should ask them about that.
Lola:
Matthew: The question is worth ask explicitly about causing developer confusion.
Hadley: Reasonable to ask. It's the sort of thing we'd hope to see in an explainer.
Matthew: The question about stuff in the DOM / if rendered, there is something else about this question, which is, ties into other barriers as well. If animation is critical to the content on the page, then it is not necessary in the DOM. You have to explore them. The animation is when it wants to happen, not when you want to. It might be too fast for some people with accessibility or cognitive disabilities, or distracted. One of the things the APA is drafting is, the animations are not used for absolutely critical and/or the user agent gives the user some agency on the speed that these things that happen. This was also mentioned in the CSS group / that pleased me because they're thinking that. I don't know if the UAs enable that. In general we don't want to use this type of animation unless it is absolutely critical. There are videos where you can provide an alternative, in which case the animation is decorative, in the body or something like that. It is important and there is a more fundamental thing. Good to expose but if the user doesnt have a chance to grasp it before it goes away, there is not much point.
Hadley: Re speed of animation, as a user, would I know enough from the site to adapt it? I'm guessing it is a decision the site developers made beforehand, the speed of animation. Or maybe I could adapt it after I found the site frustrating?
Matthew: Thinking that this should be something the UA should have an idea about on behalf of the user. UAs could do this and they're not writing...
Lola: On the speed of animation thing, what do current animation folks do now. This wouldn't be the first time that issue would've been raised. With other animations or in general, how do they handle that issue.
Matthew: For housekeeping: the consideration section would cover all of it. There is a number of different ways this could be handled to include in our response. Web Platform issue: https://github.com/w3ctag/gaps/issues/15 . It does mention some very high level user requirements. Plenty more we could add, but they wanted to just publish it. This might be a good place to discuss for more cross-platform stuff.
Xiaocheng: Re animation speed, if we're talking about conventional animations, the animation speed is always set by developer, the scroll linked animation is only mechanism where user can decide the animation speed. Re whether in the DOM or not, I'm not sure about any mechanism about animating anything not in the DOM. if the page wants to load. domething dynamically, it has to be done by other means, and then after it's loaded, we add animations to it. Re discoverability of these elements, there is a very similar thing added to the spec, discrete transitions, if we display the type from none to block, with traditional transitions we can't add animations but with discrete transition we can have fading animation. And starting state of transition is display none, and I'm not sure if AT is undiscoverable.
Matthew: display none removes things from the Accessibiltiy Tree.
Xiaocheng: have we reviewed this before?
Hadley: let's check our github issues.
Xiaocheng: Previous design reviews for discrete transitions: https://github.com/w3ctag/design-reviews/issues/829 https://github.com/w3ctag/design-reviews/issues/825
Sarven: This is a good topic. it for input the user agent's doucment about...the UA has a good shot, a good sense of hte user's capabilities and needs. So in the UA doucment has an understanding that there are duteis o the UA to fulfill, to protect the user and so on. I can have a look at the doument and see how we can caputre this point about ensruing the user's needs or capabilities are factored in to its decision-making. The UA should provide the controls to control that
Hadley: I think it's great to put this into the UA document.
Matthew: Sarven just made me say this, 100% million agree. Priority of constituencies! The author's viewpoint has been more important than the user and that's where the problems have come from. Priority of constituencies is super important. This is how I imagine it to work. I have turned up text size in the OS, and the browser doesn't see it but does reflect it. It could be done transparently to the author.
Hadley: why do that in the OS instead of the browser?
Matthew: I need it for other apps too
Sarven: another example is dark mode or light mode, which is in the OS and inherited in the browser. I prefer to have that, I trust my OS most, and I want to dictate how the rest of my interaction happens on my computer and browsers want context. so if I set it to dark mode at night, I like my UA to adhere to that. Similar ideas to the controls that are there in the OS for the user's vision... I don't know what controls are there but the UA should acknolwedge that. Without leaking info to the website.
Hadley: Sounds like we have TAG opinions on this. Happy to support APA on this. Should we put a comment to reflect our opinions on this?
Matthew: We just had a chat that seem to be on the same page. The direction we'd like to see. They already say the UA suggestion, so maybe we take that from them because they wrote it down already. Discretely, 1-2 questions Lola raised, most impotrantly the dev confusion. And UA feature. I'd like to say something about motion gap.
Discussed
Mar 16, 2026 (See Github)
Matthew: We (APA) looked at it, had most of the suggestions in the a11y considerations section that we would have raised. Leaves developer ergonomics. Need to draft a comment.
Discussed
Mar 30, 2026 (See Github)
Matthew to write comment
OpenedNov 10, 2025
Specification
https://drafts.csswg.org/css-animations-2/#timeline-triggers
Explainer
https://github.com/explainers-by-googlers/scroll-triggered-animations/blob/main/README.md
Links
The specification
Where and by whom is the work is being done?
Feedback so far
You should also know that...
There is also a Web Animations component to this proposal but only the CSS Animations spec is up to date. We plan to update the Web Animations spec after the CSSAnimations spec has been reviewed in #13010. We expect the web animations API to reflect the css animations API.
<!-- Content below this is maintained by @w3c-tag-bot -->Track conversations at https://tag-github-bot.w3.org/gh/w3ctag/design-reviews/1167