Add CSS scroll-timeline* properties #21277

hamishwillee · 2022-10-04T03:15:15Z

FF103 added support for the following CSS properties behind a pref layout.css.scroll-linked-animations.enabled:

scroll-timeline-name
scroll-timeline-axis
scroll-timeline (shorthand)

This adds documentation. I am also updating related docs like animation-timeline to purge @scroll-timeline at-rule, which this replaces and which is not part of the spec.

Note that this requires preferences to be set in chrome and in FF to work. I'll look at BCD next so that will become obvious.

Other docs work can be tracked in #21069

github-actions · 2022-10-04T03:17:59Z

Preview URLs (8 pages)

Flaws (6)

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

URL: /en-US/docs/Web/CSS/scroll-timeline-axis
Title: scroll-timeline-axis
Flaw count: 3

broken_links:
- Link points to the page it's already on
- Link points to the page it's already on
bad_bcd_queries:
- No BCD data for query: css.properties.scroll-timeline-axis

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

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

URL: /en-US/docs/Web/CSS/scroll-timeline-name
Title: scroll-timeline-name
Flaw count: 2

broken_links:
- Link points to the page it's already on
bad_bcd_queries:
- No BCD data for query: css.properties.scroll-timeline-name

(this comment was updated 2022-10-10 03:35:54.999679)

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

hamishwillee · 2022-10-07T01:54:22Z

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

@@ -88,12 +107,9 @@ A scroll timeline named `squareTimeline` is declared and applied to the `#square
  animation-duration: 3s;


Not clear why you need animation-duration when a timeline is provided by the scrollbar. But in FF at least it does not rotate without this.

hamishwillee · 2022-10-07T02:46:04Z

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

@@ -12,7 +12,10 @@ tags:
 browser-compat: css.at-rules.scroll-timeline
 ---

-{{CSSRef}}{{Non-standard_header}}{{Deprecated_header}}
+{{CSSRef}}{{Deprecated_header}}


Should we just delete this document altogether? It is implemented in chrome so people might be using it, but it is non standard and will shortly be superseded on all platforms

Maybe we can still keep it around until 'scroll-timeline' property becomes default in two browsers?

Thanks. I'm in two minds. The argument to remove is that this is non standard, deprecated, and the result of a removed draft specification - i.e. should never have been in the wild. The argument to keep is that it is in chrome. Perhaps a compromise would be when the proper API is in one browser.

dipikabh

Thanks for these updates, @hamishwillee! Just a few minor suggestions.

files/en-us/mozilla/firefox/experimental_features/index.md

dipikabh · 2022-10-07T11:05:52Z

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

@@ -12,7 +12,10 @@ tags:
 browser-compat: css.at-rules.scroll-timeline
 ---

-{{CSSRef}}{{Non-standard_header}}{{Deprecated_header}}
+{{CSSRef}}{{Deprecated_header}}


Maybe we can still keep it around until 'scroll-timeline' property becomes default in two browsers?

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

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

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

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

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

hamishwillee · 2022-10-09T23:38:55Z

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

+A `<scroll-timeline-name>` value followed by a `<scroll-timeline-axis>` value may be applied to the container element in any order.
+At least one value must be applied.
+
+Allowed values for `<scroll-timeline-name>` are:
+
+- `none`
+  - : The timeline has no name.
+- `<custom-ident>`
+  - : 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).
+
+The `<scroll-timeline-axis>` indicates which scrollbar axis, in the element identified by `<scroll-timeline-name>`, provides the scroll timeline.
+Allowed values are:
+
+- `block`
+  - : (Default) Scrollbar in the block axis of the scroll container.
+    The block axis is the direction perpendicular to the flow of text within a line.
+    For horizontal writing modes like standard English this is the same as `vertical`, while for vertical writing modes it is the same as `horizontal`.
+- `inline`
+  - : Scrollbar in the inline axis of the scroll container.
+    The inline axis is the direction parallel to the flow of text in a line.
+    For horizontal writing modes this is the same as `horizontal`, while for vertical writing modes this is the same as `vertical`.
+- `vertical`
+  - : Scrollbar in the vertical axis of the scroll container.
+- `horizontal`
+  - : Scrollbar in the horizontal axis of the scroll container.


Thanks. That makes sense. Does this work for you?

Suggested change

A `<scroll-timeline-name>` value followed by a `<scroll-timeline-axis>` value may be applied to the container element in any order.

At least one value must be applied.

Allowed values for `<scroll-timeline-name>` are:

- `none`

- : The timeline has no name.

- `<custom-ident>`

- : 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).

The `<scroll-timeline-axis>` indicates which scrollbar axis, in the element identified by `<scroll-timeline-name>`, provides the scroll timeline.

Allowed values are:

- `block`

- : (Default) Scrollbar in the block axis of the scroll container.

The block axis is the direction perpendicular to the flow of text within a line.

For horizontal writing modes like standard English this is the same as `vertical`, while for vertical writing modes it is the same as `horizontal`.

- `inline`

- : Scrollbar in the inline axis of the scroll container.

The inline axis is the direction parallel to the flow of text in a line.

For horizontal writing modes this is the same as `horizontal`, while for vertical writing modes this is the same as `vertical`.

- `vertical`

- : Scrollbar in the vertical axis of the scroll container.

- `horizontal`

- : Scrollbar in the horizontal axis of the scroll container.

A `<scroll-timeline-name>` value followed by a `<scroll-timeline-axis>` value may be applied to the container element in any order.

At least one value must be applied.

Allowed values are:

- `<scroll-timeline-name>`

- : The name used to identify the timeline.

See [`scroll-timeline-name`](/en-US/docs/Web/CSS/scroll-timeline-name).

- `<scroll-timeline-axis>`

- : The axis of the element that provides the scrollbar used for the timeline.

The default is the scrollbar in the block axis.

See [`scroll-timeline-axis`](/en-US/docs/Web/CSS/scroll-timeline-axis).

Yes, this is much better. Thank you :)

hamishwillee · 2022-10-09T23:40:53Z

Hi @dipikabh

Thanks for your thorough review - more than just a "few" suggestions :-) Much appreciated.

I have accepted most of them. Just one open issue my side as a result of your comments: https://github.com/mdn/content/pull/21277/files#r990857875

…/content into css-scroll-timeline

dipikabh

Looks good, thanks a lot! 👍

Add CSS scroll-timeline* properties

41411a9

github-actions bot added the Content:CSS Cascading Style Sheets docs label Oct 4, 2022

hamishwillee commented Oct 4, 2022

View reviewed changes

files/en-us/web/css/scroll-timeline/index.md Outdated Show resolved Hide resolved

hamishwillee mentioned this pull request Oct 4, 2022

[CSS] Named Scroll Progress Timelines #21069

Closed

9 tasks

estelle mentioned this pull request Oct 4, 2022

Documentation needed for Interop 2022 openwebdocs/project#137

Closed

63 tasks

hamishwillee added 4 commits October 7, 2022 10:53

Fix up scroll overflow

c45c54c

Add better @scroll-timeline deprecation warning

16e0d12

Fix up exmaple in scroll-timeline

605b145

Fix up exmaple in animation-timeline. Purge @scroll-timeline

02b4aba

github-actions bot added the Content:Other Any docs not covered by another "Content:" label label Oct 7, 2022

hamishwillee commented Oct 7, 2022

View reviewed changes

hamishwillee added 2 commits October 7, 2022 16:00

Add scroll-timeline-axis and scroll-timeline-name

bb5533d

Merge branch 'main' into css-scroll-timeline

17b6671

hamishwillee marked this pull request as ready for review October 7, 2022 05:02

hamishwillee requested review from a team as code owners October 7, 2022 05:02

hamishwillee requested review from dipikabh and removed request for a team October 7, 2022 05:02

dipikabh self-assigned this Oct 7, 2022

dipikabh requested changes Oct 9, 2022

View reviewed changes

hamishwillee and others added 2 commits October 10, 2022 09:52

Update files/en-us/mozilla/firefox/experimental_features/index.md

33c1952

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

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

3691ef2

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

hamishwillee commented Oct 9, 2022

View reviewed changes

files/en-us/web/css/scroll-timeline-name/index.md Outdated Show resolved Hide resolved

hamishwillee and others added 2 commits October 10, 2022 10:05

Apply suggestions from code review

0274b7f

Co-authored-by: Dipika Bhattacharya <dipika@foss-community.org>

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

f4350e0

hamishwillee commented Oct 9, 2022

View reviewed changes

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

1b21474

hamishwillee requested a review from dipikabh October 9, 2022 23:40

hamishwillee added 2 commits October 10, 2022 14:32

Add experimental tagging

5575938

Merge branch 'css-scroll-timeline' of https://github.com/hamishwillee…

3a52d3f

…/content into css-scroll-timeline

dipikabh approved these changes Oct 10, 2022

View reviewed changes

dipikabh merged commit f8dd5ee into mdn:main Oct 10, 2022

hamishwillee deleted the css-scroll-timeline branch October 10, 2022 22:27

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add CSS scroll-timeline* properties #21277

Add CSS scroll-timeline* properties #21277

hamishwillee commented Oct 4, 2022 •

edited

Loading

github-actions bot commented Oct 4, 2022 •

edited

Loading

hamishwillee Oct 7, 2022 •

edited

Loading

hamishwillee Oct 7, 2022

dipikabh Oct 7, 2022

hamishwillee Oct 9, 2022

dipikabh left a comment

dipikabh Oct 7, 2022

hamishwillee Oct 9, 2022

dipikabh Oct 10, 2022

hamishwillee commented Oct 9, 2022

dipikabh left a comment

		@@ -88,12 +107,9 @@ A scroll timeline named `squareTimeline` is declared and applied to the `#square
		animation-duration: 3s;

Add CSS scroll-timeline* properties #21277

Add CSS scroll-timeline* properties #21277

Conversation

hamishwillee commented Oct 4, 2022 • edited Loading

github-actions bot commented Oct 4, 2022 • edited Loading

hamishwillee Oct 7, 2022 • edited Loading

Choose a reason for hiding this comment

hamishwillee Oct 7, 2022

Choose a reason for hiding this comment

dipikabh Oct 7, 2022

Choose a reason for hiding this comment

hamishwillee Oct 9, 2022

Choose a reason for hiding this comment

dipikabh left a comment

Choose a reason for hiding this comment

dipikabh Oct 7, 2022

Choose a reason for hiding this comment

hamishwillee Oct 9, 2022

Choose a reason for hiding this comment

dipikabh Oct 10, 2022

Choose a reason for hiding this comment

hamishwillee commented Oct 9, 2022

dipikabh left a comment

Choose a reason for hiding this comment

hamishwillee commented Oct 4, 2022 •

edited

Loading

github-actions bot commented Oct 4, 2022 •

edited

Loading

hamishwillee Oct 7, 2022 •

edited

Loading