Skip to content

[web-animation-2] Resolution of fill=auto for progress-based timelines #6673

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

Closed
wants to merge 3 commits into from
Closed

[web-animation-2] Resolution of fill=auto for progress-based timelines #6673

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2178921
Update resolution of fill-mode auto
Sep 23, 2021
e8b2544
Merge branch 'main' into fill-auto
Sep 23, 2021
c7313d7
Fix typo
Sep 23, 2021
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
19 changes: 19 additions & 0 deletions web-animations-2/Overview.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2248,6 +2248,25 @@ partial dictionary OptionalEffectTiming {
> <a>sequence effect</a>. The |specified end delay| is converted to an
> <a>end delay</a> following the [=normalize specified timing=] procedure.

: <dfn>fill</dfn>
:: Update the rules for resolving the special string value <code>auto</code>
in timing calculations as:

> <dl class="switch">
>
> : If <em>either</em> of the following conditions are true:
> * the <a>animation effect</a> to which the fill mode is being
> applied is not a <a>keyframe effect</a>,
> * the <a>animation effect</a> is associated with a
> [=progress-based timeline=]
Copy link
Contributor

@flackr flackr Sep 23, 2021

Choose a reason for hiding this comment

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

I suspect we might want this to be as narrow as possible. E.g. if the animation active active phase does not touch the end of the timeline it probably shouldn't fill. How about we add something like "and the start delay + active duration = 100%"?

Also, does this need to be fill: both? The start time is inclusive so we only need to extend the end to make it end-inclusive. The complication is of course that we have to flip the fill when the animation direction is "backwards" but this seems not too complicated.

Copy link
Contributor

@flackr flackr Sep 23, 2021

Choose a reason for hiding this comment

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

@birtles FYI

Copy link
Contributor

@birtles birtles Sep 24, 2021

Choose a reason for hiding this comment

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

I think the first condition is in agreement with the updated definition for 'auto' here: https://drafts.csswg.org/web-animations-2/#the-fillmode-enumeration but perhaps we could phrase it to be more generic such that each type of animation effect defines what "auto" means to it? e.g. introduce a term for that? intrinsic fill mode, default fill mode or something?

For the second condition I'm not sure. In general I prefer a wider definition because it feels less magical and more composable if there are fewer rules to consider. Furthermore, "fill: both" would mean we don't need to worry about the reversing case. However, I don't have a good sense for the implications of extending the fill mode to scroll-linked content. Is there any example content (real or artificial) that highlights the difference?

Copy link
Contributor

@flackr flackr Sep 24, 2021 •
edited
Loading

Choose a reason for hiding this comment

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

I agree it would be nice to have a simple definition here. It could be something like if the animation effect is associated with a progress-based timeline and the specified effect duration is 'auto', then the intrinsic fill mode is 'both'. This would handle simple cases like:

// simple parallax
element.animate({transform: ['translateY(100px)']}, {timeline: new ScrollTimeline()});

The reason not to always use fill-mode: both is that it would be surprising in cases where the developer specifies an animation that does not fill the scroll range:

  • when the developer specifies a duration and end delay, e.g. element.animate({transform: ['translateY(-50px)', 'none']}, {duration: 1000, endDelay: 1000, timeline: scrollTimeline}), we follow the procedure to convert to progress and have a computed duration of 50%. The developer would expect the animation not to be in effect during the end delay period.

  • when we allow specifying percentage durations (e.g. as CSSNumericValues or percentage strings), the developer may specify one or more animations which are meant to follow each other, e.g.

    element.animate({transform: ['translateY(-50px)', 'none']}, {duration: CSS.percent(10), timeline: scrollTimeline}); 
element.animate({transform: ['none', 'translateY(50px)']}, {duration: CSS.percent(10), startDelay: CSS.percent(90), timeline: scrollTimeline})

  • when multiple effects are used with a SequenceEffect on a ScrollTimeline, the effects should split the duration of the timeline duration and we'd only expect the last effect to fill: forwards to include the end position.

Of course the developer can always override the fill mode in some of those scenarios, I'd just like to get it right in most cases if we can.

Copy link
Contributor Author

@kevers-google kevers-google Sep 27, 2021

Choose a reason for hiding this comment

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

Planning to put this PR on the back burner pending resolution of #6508. If the problem is limited to precisely the timeline boundaries, then perhaps best to resolve there. The fill resolution will get cumbersome if it needs to take into account start and end delays and also offsets that are not aligned at 0 and 100%.

> :: Use <span class="enum-value">both</span> as the
> <a>fill mode</a>.
> : Otherwise,
> :: Use <span class="enum-value">none</span> as the
> <a>fill mode</a>.
>
> </dl>

: <dfn>duration</dfn>
:: Update the description as:

Expand Down