Skip to content

[scroll-animations] Update scroll timeline css syntax and properties (#4338, #4336) #4751

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 3, 2020
Merged

[scroll-animations] Update scroll timeline css syntax and properties (#4338, #4336) #4751

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
41ef1b4
[scroll-animations] Update timeline css syntax
majido Feb 5, 2020
c3c59bb
Address ogerchikov@ feedback
majido Mar 25, 2020
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
Prev Previous commit
Address ogerchikov@ feedback
  • Loading branch information
@majido
majido committed Mar 26, 2020
commit c3c59bb9d358efcb99a05aa9006c8125bbde34a8
33 changes: 21 additions & 12 deletions scroll-animations-1/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -268,8 +268,8 @@ Typically, the scroll bar provides this visual indication but
applications may wish to hide the scroll bar for aesthetic or useability
reasons.

Using the 'animation-timeline' property, this example could be written
as follows:
Using the updated 'animation' shorthand that includes 'animation-timeline',
this example could be written as follows:

<pre class='lang-css'>
@media (prefers-reduced-motion: no-preference) {
Expand All @@ -285,15 +285,12 @@ as follows:
width: 0px;
height: 30px;
background: red;
animation: progress 1s linear;
animation-fill-mode: forwards;
animation-timeline: progress-timeline;
animation: 1s linear forwards progress progress-timeline;
}


}
</pre>


If we use this API for this case, the example code will be as follow:

<pre class='lang-javascript'>
Expand Down Expand Up @@ -625,11 +622,19 @@ In this case, each possible value of type <<keyframes-name>> from
{{DocumentTimeline}}, more specifically the <a>default document
timeline</a>.

Note: Notice that the behavior for the case when no timeline with given name was
found is different for either property. This ensures backward compatibility
since most existing animations which have 'animation-name' specified expect to
use <a>default document timeline</a>.
Note: Notice that the behavior for the case where no timeline with the given
name is found is different for these two properties. This ensures backward
compatibility because all existing time-based animations with 'animation-name'
specified expect to use <a>default document timeline</a>.

### Changes to the 'animation' shorthand property ### {#animation-shorthand}

The 'animation' shorthand property syntax is updated to accept an additional
optional <<timeline-name>>.

<dfn>&lt;single-animation></dfn> = <<time>> || <<easing-function>> || <<time>> || <<single-animation-iteration-count>> || <<single-animation-direction>> || <<single-animation-fill-mode>> || <<single-animation-play-state>> || [ none | <<keyframes-name>> ] || [ none | <<timeline-name>> ]

Issue: Update css-animations spec instead of monkey-patching it here.

## The '@timeline' at-rule ## {#timeline-at-rule}

Expand Down Expand Up @@ -691,8 +696,12 @@ have the following effects:
'scroll-source' descriptor determines the scroll timeline's {{source}}. If
specified as an '<selector()>' the scroll timeline's {{source}} is the
[=scroll container=] identified by the <<id-selector>>, otherwise if not
specified or none then it is the animation target's nearest scrollable ancestor.
specified or none then it is the the {{scrollingElement}} of the {{Document}}
<a lt="document associated with a window">associated</a> with the {{Window}}
that is the <a>current global object</a>.

Issue(4338): consider choosing animation target's nearest scrollable ancestor
instead of document's scrolling Element

<pre class='descdef'>
Name: scroll-orientation
Expand Down