Pure Javascript Animations Made Easy | Controls & Information #2

Описание: In last video you learned how to create basic animations with pure Javascript using Web Animations API. In this part you’re going to learn how to easily control your animations. We will talk about controls, callbacks, and how to getting information out of animations.

When you call element.animate(), an Animation object is returned and the animation starts playing. We can control that and play and stops it at any time.

We can use the Web Animations API to figure out the animation’s current time. It can returns the current time value of the animation in milliseconds, whether running or paused so we can detect how much time has passed since the beginning of the animation. Also we can set current time and for example to return the animation in different time. We can speed it up or slow it down and can check the current state of the animation.

We already have a variety of events triggered by CSS that we can use in our JavaScript code. In Web Animations API if you need to listen for the end of the animation you can do it easy with onfinish event.

Link for first video:
   • Pure Javascript Animations Made Easy | Bas...  

Useful articles:
https://css-tricks.com/css-animations...
https://developer.mozilla.org/en-US/d...