[csswg-drafts] [scroll-animations] playbackRate effect on non time-based animations (#8816)

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

== [scroll-animations] playbackRate effect on non time-based animations ==
A common pattern in animations based on scroll/hover is adding interpolation from last position to current position, so that a smooth movement is achieved even on abrupt progress changes, e.g. clicking on the scrollbar in a different location.

I proposed adding this effect by defining the interaction of `Animation.playbackRate` with non time-based animations here: https://github.com/w3c/csswg-drafts/issues/7059#issuecomment-1415913052.

The Web Animations API 1 [spec of Animation's playbackRate](https://drafts.csswg.org/web-animations-1/#playback-rate):

> [Animations](https://drafts.csswg.org/web-animations-1/#concept-animation) have a playback rate that provides a scaling factor from the rate of change of the associated [timeline](https://drafts.csswg.org/web-animations-1/#timeline)’s [time values](https://drafts.csswg.org/web-animations-1/#time-value) to the animation’s [current time](https://drafts.csswg.org/web-animations-1/#animation-current-time).

If we translate that into non time-based (non-monotonic timelines) it's effectively a linear interpolation on each frame between current progress and last progress, so on each frame the progress' update becomes:
```javascript
new_progress = last_progress * (1 - playbackRate) + current_progress * playbackRate
```

And this maintains an effectively paused animation on `playbackRate == 0` and a flipped progress for `playbackRate == -1`.

In respect to Scroll-driven timelines [progress is described](https://drafts.csswg.org/scroll-animations-1/#scroll-timelines) as:

> The startmost scroll position represents 0% progress and the endmost scroll position represents 100% progress.

I've created a demo that I hopes at least captures the nature of this feature: https://codepen.io/ydaniv/pen/VwBojoN
Notice that the effect is mostly prominent from `playbackRate=~0.1` and below, because of its exponential nature.

I think this feature is orthogonal to the Transition delays feature suggested in #7059, although it creates a similar effect.

cc @birtles @flackr @fantasai @smfr 




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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Sunday, 7 May 2023 17:45:41 UTC