[csswg-drafts] Animations end up finishing at scroll-position == max (#4341)

stephenmcgruer has just created a new issue for https://github.com/w3c/csswg-drafts:

== Animations end up finishing at scroll-position == max ==
Even after fixing w3c/scroll-animations#19 , there is still an issue with (probably) unexpected behavior for web authors, relating to full-scroller ScrollTimeline animations.

Consider the following:

```javascript
const scroll_timeline = new ScrollTimeline({ scrollSource: scroller });
const effect = new KeyframeEffect(target, keyframes, { duration: 1000 });
const anim = new Animation(effect, scroll_timeline);
anim.play();

scroller.scrollTop = max_scroll_top;  // precalculated
```

At this point, [currentTime](https://wicg.github.io/scroll-animations/#current-time-algorithm) is calculated as:

```javascript
= (current scroll offset - startScrollOffset) / (endScrollOffset - startScrollOffset) × effective time range
= (max_scroll_offset - 0) / (max_scroll_offset - 0) * effective time range
= 1 * effective time range
= 1 * 1000
= 1000
```

But per Web Animations, once the time is at the [target effect end](https://drafts.csswg.org/web-animations-1/#target-effect-end), the animations [is finished](https://drafts.csswg.org/web-animations-1/#update-an-animations-finished-state) and (assuming no fill mode) it will go back to the non-animating style.

A 'real world' example for this could be a sticky header bar on your website (although in that simple case you should really be using `position: sticky`!). When the user scrolled all the way to the bottom, the header bar would suddenly disappear as its animation finished.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4341 using your GitHub account

Received on Thursday, 19 September 2019 05:41:45 UTC