[Webkit-unassigned] [Bug 213163] [Web Animations] Updating an Animation on an Element fails

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=213163

Owen Delisle <owen37164 at gmail.com> changed:

           What    |Removed                     |Added
----------------------------------------------------------------------------
                 CC|                            |owen37164 at gmail.com

--- Comment #13 from Owen Delisle <owen37164 at gmail.com> ---
(In reply to Antoine Quint from comment #8)
> Note also that Safari does not support the "composite" property.

(In reply to Antoine Quint from comment #7)
> Travis, I haven't diagnosed the issue yet to determine what is going wrong,
> but you can certainly write your content in a much simpler way by using a
> single animation and calling reverse() on it. Here's an alternative version
> of your index.js file:
> 
> 
>     // Create the animation.
>     const animation = document.getElementById('square').animate({
>         transform: ['rotate(0deg)','rotate(180deg)'],
>         offset: [ 0, 1 ],
>         easing: [ 'linear' ],
>     }, {
>         duration: 1000,
>         composite: 'add',
>         fill: 'forwards'
>     });
> 
>     // Let the animation be paused originally.
>     animation.pause();
> 
>     document.getElementById("button").addEventListener("click", event => {
>         // If the animation has not played yet, play it.
>         if (animation.playState == "paused")
>             animation.play();
>         // Otherwise, reverse the playback direction.
>         else
>             animation.reverse();
>     });
> 
> As for your question about testing, it's always useful to indicate known
> behavior difference between Safari/WebKit and other browsers as well as
> previous versions of Safari in case there is a regression.

The reverse function doesn't actually work in Safari. 

You can see the browser support for the reverse function on MDN here:
https://developer.mozilla.org/en-US/docs/Web/API/Animation/reverse#:~:text=reverse()%20method%20of%20the,animation%20will%20continue%20in%20reverse.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20200623/eabf94e4/attachment.htm>