Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 40 additions & 0 deletions feature-group-definitions/scroll-driven-animations.dist.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# Generated from: scroll-driven-animations.yml
# Do not edit this file by hand. Edit the source file instead!

name: Scroll-driven animations
description: CSS scroll-driven animations are a type of CSS animations that don't run over time, but are instead driven by the user's scroll position.
spec: https://drafts.csswg.org/scroll-animations-1/
status:
baseline: false
support:
chrome: "115"
chrome_android: "115"
edge: "115"
compat_features:
- api.ScrollTimeline
- api.ScrollTimeline.axis
- api.ScrollTimeline.ScrollTimeline
- api.ScrollTimeline.source
- api.ViewTimeline
- api.ViewTimeline.endOffset
- api.ViewTimeline.startOffset
- api.ViewTimeline.subject
- api.ViewTimeline.ViewTimeline
- css.properties.animation-range
- css.properties.animation-range-end
- css.properties.animation-range-start
- css.properties.animation-timeline
- css.properties.animation-timeline.scroll
- css.properties.animation-timeline.view
# https://crbug.com/337580010 tracks this bug, but setting the timeline via
# the animation shorthand is not necessary to use the feature.
# - css.properties.animation.animation-timeline_included
- css.properties.scroll-timeline
- css.properties.scroll-timeline-axis
- css.properties.scroll-timeline-name
# Later addition (Chrome 116)
# - css.properties.timeline-scope
Comment on lines +35 to +36
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to be convinced on this. What's the case for pulling this one out, when they landed just four weeks apart?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://chromestatus.com/feature/6752840701706240 says 115 and I expect caniuse would say 115 too if it was added. One bit of an API coming a release later is pretty common I think. Unless it's a terrible accident and the feature is unusable without that bit, I think #979 is the way to handle such cases.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe @bramus can share some insights about whether the timeline-scope property is a vital part of scroll-driven-animations, or whether the feature is mostly usable without it.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

timeline-scope is there for when want to animate an element based on a scroller that is not a parent of the animated element.

In most cases though, the animation subject is a child of the scroller – I’ve only used timeline-scope a few times in my demos.

- css.properties.view-timeline
- css.properties.view-timeline-axis
- css.properties.view-timeline-inset
- css.properties.view-timeline-name
7 changes: 5 additions & 2 deletions feature-group-definitions/scroll-driven-animations.yml
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,14 @@ compat_features:
- css.properties.animation-timeline
- css.properties.animation-timeline.scroll
- css.properties.animation-timeline.view
- css.properties.animation.animation-timeline_included
# https://crbug.com/337580010 tracks this bug, but setting the timeline via
# the animation shorthand is not necessary to use the feature.
# - css.properties.animation.animation-timeline_included
- css.properties.scroll-timeline
- css.properties.scroll-timeline-axis
- css.properties.scroll-timeline-name
- css.properties.timeline-scope
# Later addition (Chrome 116)
# - css.properties.timeline-scope
- css.properties.view-timeline
- css.properties.view-timeline-axis
- css.properties.view-timeline-inset
Expand Down