#828: Spec review for Scroll-driven Animations
Discussions
2023-05-22
Dan: positive statements from Safari and Firefox
Lea: lots of activity around this - in the working group as well
Tess: enough flux in the design ? should we try to review this snapshot?
Lea: shipping in Chrome 115 - next major version... I would have liked to look at the syntax more closely...
Tess: haven't looked at it - the basic ideas using a scrollbar as a tme source is great.
Lea: the explainer is doing a good job.
Tess: these days the web animations spec defines the basic animation model - things like CSS animations and CSS transitions are on that same model.
Lea: from a quick look looks like this plugs in the same way.
Dan: they've filled out the s&p questionnaire - that looks good.
Lea: seems to be a very well done proper review.
Dan: should we delay..?
Peter: we did a previous review of this and raised some concerns - and it looks like they took care of those... Looks like they took our feedback on board.
Lea: bit of a shame that all of the explainer examples are using the css syntax... However my initial view is that it's pretty good. it covers edge cases... it's built on primitives. A little uncomfortable as haven't had time to look in depth but I like what I see. I'm inclined to say let's close it.
Peter: I agree. My one concern is that this is overdone... if we make it easier will people abuse it?
Tess: one thing nice about baking it in - is that's in annoying because it's a little off. So making it frame-accurate animation will make it less annoying.
Peter: also prefers-reduced-motion to turn it off.
Lea: also can build extensions to block that particular thing.
<blockquote> Thank you for taking our previous round of feedback into consideration and making appropriate changes. Also thanks for such a well written, exemplary explainer! We looked at this today during a breakout and we think it looks great. We're happy to see it move forward! </blockquote>CLOSED SATISFIED
OpenedMar 27, 2023
I'm requesting a TAG review of Scroll driven animation. This was previously reviewed as the scroll linked animations spec but has since undergone a quite substantial rewrite in response to https://github.com/w3c/csswg-drafts/issues/6674 with the goal of being easier to author reusable CSS scroll driven animations by using scoped named animations in a similar fashion to container names. The other major change is that element based animations are now driven using the ViewTimeline concept.
This specification defines mechanisms for driving the progress of an animation based on the scroll progress of a scroll container. These scroll-driven animations use a timeline based on scroll position, rather than one based on clock time. This module provides both an imperative API building on the Web Animations API and a declarative API building on CSS Animations.
Further details:
You should also know that...
In the previous TAG review a few issues were raised:
There were concerns about some of the use cases (which are admittedly already done today via script) being known triggers for vestibular disorders. We split this out into #5321 where we explored ideas and drafted a proposal #7440 for how we could work on addressing this concern more broadly for all animations. It's important to note that without declarative scroll driven animations, short of disabling Javascript the browser can't prevent these cases today - so the existence of this API puts us in a better position to address motion concerns in an automated way across more use cases.
There were also concerns with explicit element id references. In #6674 the spec underwent a significant rewrite such that animation references could be established via CSS using the DOM hierarchy in a way that is easily reusable across lists of elements.
At this point in time, we have worked through resolutions to the majority of the issues in the project tracker. While the spec edits have not completely caught up it is in line with the current thinking and broadly explains the feature.
We'd prefer the TAG provide feedback as (please delete all but the desired option):
🐛 open issues in our GitHub repo for each point of feedback