Add docs for CSS Scroll-driven animations #27075

chrisdavidmills · 2023-05-31T17:16:01Z

Description

The Scroll-driven animations spec is mostly supported in Chromium 115. This PR adds content for the new properties, functions, and other syntax defined in this spec, plus some related features from CSS Animations Level 2.

See my research document for more details as to what has been added. Note that this document includes some specific comments about items that still don't seem to be supported correctly in Chrome. In some cases, they are waiting for bugs to be fixed, but if those bugs don't get fixed by the time of launch, we might have to revert a bit of BCD data.

Motivation

Additional details

Related issues and pull requests

Related BCD additions: Updated BCD for Scroll-Driven Animations spec browser-compat-data#19942
Related CSS syntax data additions: Adding CSS data for Scroll-driven animations spec data#669

Fixes #26544

github-actions · 2023-05-31T17:34:06Z

Preview URLs (37 pages)

Flaws (2)

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

URL: /en-US/docs/Web/CSS/timeline-scope
Title: timeline-scope
Flaw count: 1

bad_bcd_queries:
- No BCD data for query: css.properties.timeline-scope

URL: /en-US/docs/Web/CSS/CSS_animations
Title: CSS animations
Flaw count: 1

broken_links:
- Can't resolve /en-US/docs/Web/CSS/CSS_Transitions

External URLs (7)

URL: /en-US/docs/Web/API/Element/animate
Title: Element: animate() method

https://scroll-driven-animations.style/tools/view-timeline/ranges/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/CSS_scroll-driven_animations
Title: CSS scroll-driven animations

https://developer.chrome.com/articles/scroll-driven-animations/ (1 time) (Note! This may be a new URL 👀)
https://scroll-driven-animations.style/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/@keyframes
Title: @keyframes

https://developer.chrome.com/articles/scroll-driven-animations/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/animation-range-end
Title: animation-range-end

https://scroll-driven-animations.style/tools/view-timeline/ranges/ (1 time) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/animation-range
Title: animation-range

https://scroll-driven-animations.style/tools/view-timeline/ranges/ (2 times) (Note! This may be a new URL 👀)

URL: /en-US/docs/Web/CSS/animation-range-start
Title: animation-range-start

https://scroll-driven-animations.style/tools/view-timeline/ranges/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2023-06-26 06:17:07)

files/en-us/web/css/@keyframes/index.md

files/en-us/web/css/css_scroll-driven_animations/index.md

Co-authored-by: Estelle Weyl <[email protected]>

files/en-us/web/css/css_scroll-driven_animations/index.md

Co-authored-by: Dipika Bhattacharya <[email protected]>

bramus · 2023-06-14T20:38:14Z

Please note that a late change to the spec changed the syntax for scroll-timeline-name and view-timeline-name. They no longer accept <custom-ident> but need a <dashed-ident> instead (w3c/csswg-drafts#8746). All code example will also need updating because of this.

Furthermore timeline-scope doesn’t seem to be covered. I replaces scroll-timeline-attachment and view-timeline-attachment which were part of the spec before, but now omitted. (w3c/csswg-drafts#7759)

bramus · 2023-06-14T20:42:17Z

And oh, getCurrentTime also got removed from scroll-animations-1, as per CSSWG resolution in w3c/csswg-drafts#8765 (comment). The edit doesn’t seem to be published yet, though.

bramus · 2023-06-14T20:45:39Z

files/en-us/web/api/element/animate/index.md

    - `timeline` {{optional_inline}}
-      - : A property unique to `animate()`: the {{domxref("AnimationTimeline")}} to associate with the animation. Defaults to {{domxref("Document.timeline")}}.
+      - : A property unique to `animate()`: The {{domxref("AnimationTimeline")}} to associate with the animation. Defaults to {{domxref("Document.timeline")}}.



rangeStart and rangeEnd are missing here.

Ah, I originally left them out because they didn't seem to do anything. I think it was around the time when the implementation was in progress. They do seem to work now, although some of the value effects aren't what I'd quite expect. Do all of the value types as specced work, in your experience?

My descriptions are in my next commit.

From my experience they seemed to work well. Only used the string variation though, where I – for example – set rangeEnd to "cover 100%" instead of an object.

Hrm, I wonder whether I should just list the string values then, at least for now, while we investigate the other options.

OK, so to clear this up, I've added clear examples of the string values, and made the values used in the on-page example string values. If it turns out people want more information of examples on the other value types, we can always add them later.

bramus · 2023-06-14T20:46:27Z

files/en-us/web/api/animationtimeline/index.md

  - : Returns the time value in milliseconds for this timeline or `null` if this timeline is inactive.

+## Instance methods


This method is no longer part of scroll-animations-1, as per w3c/csswg-drafts#8765 (comment) resolution

Hrm, I deleted this in my last commit, but it seems to be back again today. I've deleted it in my next commit.

bramus · 2023-06-14T20:47:33Z

files/en-us/web/api/scrolltimeline/axis/index.md

+  - : The scrollbar on the block axis of the scroll container, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `vertical`, while for vertical writing modes, it is the same as `horizontal`.
+- `inline`
+  - : The scrollbar on the inline axis of the scroll container, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as the `horizontal` axis, while for vertical writing modes, this is the same as `vertical`.
+- `vertical`


This should be y. vertical once was part of the spec, but no longer is as per w3c/csswg-drafts#8666 (comment) resolution.

Darnit. I fixed this on the CSS *-timeline-axis pages, but forgot about this one. Fixed now.

bramus · 2023-06-14T20:47:44Z

files/en-us/web/api/scrolltimeline/axis/index.md

+  - : The scrollbar on the inline axis of the scroll container, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as the `horizontal` axis, while for vertical writing modes, this is the same as `vertical`.
+- `vertical`
+  - : The scrollbar on the vertical axis of the scroll container.
+- `horizontal`


This should be x. horizontal once was part of the spec, but no longer is as per w3c/csswg-drafts#8666 (comment) resolution.

Darnit. I fixed this on the CSS *-timeline-axis pages, but forgot about this one. Fixed now.

bramus · 2023-06-14T20:49:18Z

files/en-us/web/api/scrolltimeline/scrolltimeline/index.md

+
+        - `block`: The scrollbar on the block axis of the scroll container, which is the axis in the direction perpendicular to the flow of text within a line. For horizontal writing modes, such as standard English, this is the same as `vertical`, while for vertical writing modes, it is the same as `horizontal`.
+        - `inline`: The scrollbar on the inline axis of the scroll container, which is the axis in the direction parallel to the flow of text in a line. For horizontal writing modes, this is the same as the `horizontal` axis, while for vertical writing modes, this is the same as `vertical`.
+        - `vertical`: The scrollbar on the vertical axis of the scroll container.


This should be y. vertical once was part of the spec, but no longer is as per w3c/csswg-drafts#8666 (comment) resolution.

Darnit. I fixed this on the CSS *-timeline-axis pages, but forgot about this one. Fixed now.

bramus · 2023-06-14T21:02:55Z

files/en-us/web/css/view-timeline-name/index.md

+
+- `none`
+  - : The timeline has no name.
+- `<custom-ident>`


Suggested change

- `<custom-ident>`

- `<dashed-ident>`

I've updated this in my next commit

bramus · 2023-06-14T21:03:24Z

files/en-us/web/css/view-timeline/index.md

+## Syntax
+
+```css
+/* two values: one each for view-timeline-name and view-timeline-axis */


All names need updating to <dashed-ident> variations

Done. I've updated all instances of custom_name_for_timeline to --custom_name_for_timeline.

bramus · 2023-06-14T21:04:13Z

files/en-us/web/css/scroll-timeline-name/index.md

@@ -32,8 +29,10 @@ Allowed values for `scroll-timeline-name` are:
 - `none`
  - : The timeline has no name.
 - `<custom-ident>`


Suggested change

- `<custom-ident>`

- `<dashed-ident>`

bramus · 2023-06-14T21:04:47Z

files/en-us/web/css/scroll-timeline-name/index.md

-  - : An arbitrary custom identifier that can be used to reference the scroll timeline in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline).
-    Possible values are described in [`<custom-ident>`](/en-US/docs/Web/CSS/custom-ident).
+
+  - : An arbitrary custom identifier defining a name for a scroll progress timeline, which can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) property. See [`<custom-ident>`](/en-US/docs/Web/CSS/custom-ident) for more details about permitted values.


Suggested change

- : An arbitrary custom identifier defining a name for a scroll progress timeline, which can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) property. See [`<custom-ident>`](/en-US/docs/Web/CSS/custom-ident) for more details about permitted values.

- : An arbitrary custom identifier defining a name for a scroll progress timeline, which can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) property. See [`<dashed-ident>`](/en-US/docs/Web/CSS/dashed-ident) for more details about permitted values.

bramus · 2023-06-14T21:05:08Z

files/en-us/web/css/view-timeline-name/index.md

+  - : The timeline has no name.
+- `<custom-ident>`
+
+  - : An arbitrary custom identifier defining a name for a view progress timeline, which can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) property. See [`<custom-ident>`](/en-US/docs/Web/CSS/custom-ident) for more details about permitted values.


Suggested change

- : An arbitrary custom identifier defining a name for a view progress timeline, which can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) property. See [`<custom-ident>`](/en-US/docs/Web/CSS/custom-ident) for more details about permitted values.

- : An arbitrary custom identifier defining a name for a view progress timeline, which can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) property. See [`<dashed-ident>`](/en-US/docs/Web/CSS/dashed-ident) for more details about permitted values.

Line 32 and line 34.

chrisdavidmills · 2023-06-19T19:42:27Z

OK, in the first commit since @bramus reviewed, I have:

Added a timeline-scope page
Made sure that scroll-timeline-attachment and view-timeline-attachment are not included anywhere
Made sure <dashed-ident> details plus explanation is included in the timeline-scope and *-timeline-name pages
Made sure all examples use dashed idents for the timeline names.
Removed getCurrentTime()

I'll start working through all the above comments tomorrow.

chrisdavidmills · 2023-06-20T11:17:47Z

@bramus OK, I've done some testing and it looks like all my changes have stuck this time. Let me know if you spot anything else.

Add docs for CSS Scroll-driven animations

a7bc7ca

chrisdavidmills requested review from a team as code owners May 31, 2023 17:16

chrisdavidmills requested review from wbamberg, estelle and bsmth and removed request for a team May 31, 2023 17:16

chrisdavidmills marked this pull request as draft May 31, 2023 17:16

github-actions bot added Content:CSS Cascading Style Sheets docs Content:WebAPI Web API docs labels May 31, 2023

chrisdavidmills added 2 commits May 31, 2023 18:19

Merge branch 'main' into scroll-driven-animations

5991259

Deleting unwanted article

e712222

chrisdavidmills added 2 commits May 31, 2023 18:53

prettier fixes

2f65b27

Fix flaws

a26a947

estelle reviewed May 31, 2023

View reviewed changes

files/en-us/web/css/@keyframes/index.md Outdated Show resolved Hide resolved

estelle reviewed May 31, 2023

View reviewed changes

files/en-us/web/css/css_scroll-driven_animations/index.md Outdated Show resolved Hide resolved

chrisdavidmills and others added 3 commits June 5, 2023 10:55

Merge branch 'main' into scroll-driven-animations

84de2fd

Update files/en-us/web/css/css_scroll-driven_animations/index.md

4e5749c

Co-authored-by: Estelle Weyl <[email protected]>

Correct casing of scroll-driven animations article title and links

20e38c8

estelle mentioned this pull request Jun 7, 2023

OWD Project: CSS specs: module landing pages openwebdocs/project#147

Open

estelle reviewed Jun 7, 2023

View reviewed changes

files/en-us/web/css/css_scroll-driven_animations/index.md Outdated Show resolved Hide resolved

This was referenced Jun 7, 2023

[CSS] Support Named View Progress Timelines #26685

Closed

[CSS] Support Anonymous View Progress Timelines #26687

Closed

chrisdavidmills added 2 commits June 7, 2023 12:31

Update landing page to remove unnecessary demos and replace with link

bbdfccb

Merge branch 'main' into scroll-driven-animations

ba8c49d

dipikabh self-requested a review June 7, 2023 22:19

chrisdavidmills and others added 8 commits June 14, 2023 17:38

Update files/en-us/web/css/animation-timeline/index.md

c098257

Co-authored-by: Dipika Bhattacharya <[email protected]>

Update files/en-us/web/css/animation-timeline/index.md

b36d7da

Co-authored-by: Dipika Bhattacharya <[email protected]>

Update files/en-us/web/css/animation-timeline/index.md

eb75b32

Co-authored-by: Dipika Bhattacharya <[email protected]>

Update files/en-us/web/css/animation-timeline/index.md

1d45627

Co-authored-by: Dipika Bhattacharya <[email protected]>

Update files/en-us/web/css/animation-timeline/scroll/index.md

cd89784

Co-authored-by: Dipika Bhattacharya <[email protected]>

Merge branch 'main' into scroll-driven-animations

25e087d

Make animation-range* see also sections consistent

237788f

prettier fix

c4ad158

bramus reviewed Jun 14, 2023

View reviewed changes

dletorey mentioned this pull request Jun 15, 2023

26685 26687 view progress timelines #27349

Merged

Add timeline-scope, remove getCurrentTime(), update dashed-ident details

40ba7b8

chrisdavidmills added 4 commits June 19, 2023 20:42

Merge branch 'main' into scroll-driven-animations

4db70a5

Add experimental status to timeline-scope

8bd007d

Loads of updates

af22102

Merge branch 'main' into scroll-driven-animations

2729f70

Attempt to fix prettier error

d57f834

dipikabh approved these changes Jun 20, 2023

View reviewed changes

chrisdavidmills added 2 commits June 21, 2023 12:37

Remove deprecated axis values and fix a few errors

645ee8f

Show clear examples of rangeEnd and rangeStart string values

61d6567

chrisdavidmills mentioned this pull request Jun 21, 2023

Add notes on Firefox proprietary scroll axis values mdn/browser-compat-data#20184

Merged

chrisdavidmills added 2 commits June 21, 2023 13:16

Merge branch 'main' into scroll-driven-animations

a9720ab

Merge branch 'main' into scroll-driven-animations

d9f3b54

chrisdavidmills merged commit 34bc6ac into mdn:main Jun 26, 2023

chrisdavidmills deleted the scroll-driven-animations branch June 26, 2023 06:20

This was referenced Jul 4, 2023

added the release and flag for view() in firefox mdn/browser-compat-data#20292

Merged

updated the view-timeline-axis values for firefox mdn/browser-compat-data#20293

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add docs for CSS Scroll-driven animations #27075

Add docs for CSS Scroll-driven animations #27075

chrisdavidmills commented May 31, 2023

github-actions bot commented May 31, 2023 •

edited

Loading

bramus commented Jun 14, 2023

bramus commented Jun 14, 2023

bramus Jun 14, 2023

chrisdavidmills Jun 20, 2023

bramus Jun 20, 2023

chrisdavidmills Jun 20, 2023

chrisdavidmills Jun 21, 2023

bramus Jun 14, 2023

chrisdavidmills Jun 20, 2023

bramus Jun 14, 2023

chrisdavidmills Jun 20, 2023

bramus Jun 14, 2023

chrisdavidmills Jun 20, 2023

bramus Jun 14, 2023

chrisdavidmills Jun 20, 2023

bramus Jun 14, 2023

chrisdavidmills Jun 20, 2023

bramus Jun 14, 2023

chrisdavidmills Jun 20, 2023

bramus Jun 14, 2023

chrisdavidmills Jun 20, 2023

bramus Jun 14, 2023

chrisdavidmills Jun 20, 2023

bramus Jun 14, 2023

estelle Jun 15, 2023

bramus Jun 15, 2023

chrisdavidmills Jun 20, 2023

chrisdavidmills commented Jun 19, 2023

chrisdavidmills commented Jun 20, 2023

		- : Returns the time value in milliseconds for this timeline or `null` if this timeline is inactive.

		## Instance methods

	- : An arbitrary custom identifier defining a name for a scroll progress timeline, which can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) property. See [`<custom-ident>`](/en-US/docs/Web/CSS/custom-ident) for more details about permitted values.
	- : An arbitrary custom identifier defining a name for a scroll progress timeline, which can then be referenced in an [`animation-timeline`](/en-US/docs/Web/CSS/animation-timeline) property. See [`<dashed-ident>`](/en-US/docs/Web/CSS/dashed-ident) for more details about permitted values.

Add docs for CSS Scroll-driven animations #27075

Add docs for CSS Scroll-driven animations #27075

Conversation

chrisdavidmills commented May 31, 2023

Description

Motivation

Additional details

Related issues and pull requests

github-actions bot commented May 31, 2023 • edited Loading

bramus commented Jun 14, 2023

bramus commented Jun 14, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chrisdavidmills commented Jun 19, 2023

chrisdavidmills commented Jun 20, 2023

github-actions bot commented May 31, 2023 •

edited

Loading