Web animation - element.animate () already in Chrome 36

The animation on the web was one of the areas of JavaScript, but now that the world has moved to mobile devices, the animation has moved to CSS. This allowed us to use declarative syntax when describing animations, and the browser to optimize. In pursuit of 60fps (60 frames per second) on mobile devices, it will be useful for you to know all the subtleties and innovations concerning the mechanisms for effectively displaying animation in your browsers.

Now a large number of JavaScript-oriented tools are appearing on the market, providing more efficient mechanisms for creating animation, but the holy grail is a symbiosis of a declarative and imperative approach when pure code is the basis for a decision.

Web animations are designed to answer this call, and the first part of them has already been included in the release of Chrome 36 in the form of element.animate() . This new functionality allows you to create animations in pure JavaScript and at the same time get performance, as when using CSS animations or transitions (in fact, from the 34th version of Chrome, all the methods described above are launched via the web animation engine ).

The syntax is quite simple, and most likely it will seem familiar to you if you have ever written CSS transitions (transitions) or animation:
')

 element.animate([ {cssProperty: value0}, {cssProperty: value1}, {cssProperty: value2}, //... ], { duration: timeInMs, iterations: iterationCount, delay: delayValue }); 

The biggest improvement is that with the new functionality we will be able to forget all the crutches that we had to work with up to this point.

For example, for “Tracking Santa” last year, we wanted to see snowflakes falling smoothly, and we decided to do animation via CSS. So, this element.animate can be no less productive.

However, we wanted to choose a horizontal line for snow falling based on the screen and what is happening on the stage, and, of course, determine the height of snowflakes falling (the height of the user's browser window), which will not be known until the launch. This meant that we needed to use CSS moves and CSS animations, so to speak, on the fly, which led to huge performance losses (hundreds of snowflakes meant hundreds of new styles).

Therefore, in the following example, we applied the approach already familiar to us:

 snowFlake.style.transform = 'translate(' + snowLeft + 'px, -100%)'; //   snowFlake.offsetWidth; snowFlake.style.transitionProperty = 'transform'; snowFlake.style.transitionDuration = '1500ms'; snowFlake.style.transform = 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'; 

The chip in the comment "waiting for the frame." In order to ensure a successful start of the move, the browser must know that the element is in the starting position, and there are several ways to verify this. One of the most frequently used is to read one of the object properties, thereby triggering a recalculation of the page markup, thereby confirming that the element has a starting position before moving to the final one. Using this method allows you to once again rejoice at the fact that you know the basics of the rendering engine in the browser.

The syntax, as we see, is so transparent that you can’t think of any more:

 snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], 1500); 

But we can also specify a variety of different settings. As with CSS animations, Web animations can be delayed and iterated.

 snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], { duration: 1500, iterations: 10, delay: 300 }); 

AnimationPlayer object

element.animate () returns an AnimationPlayer object whose importance grows in proportion to the number of animations running on the page. Both JavaScript and CSS animations will be associated with AnimationPlayers, allowing them to be combined in various useful and interesting ways.

Now, AnimationPlayer has two functionalities, and both are very useful. You can cancel an animation at any time using AnimationPlayer.cancel() :

 var player = snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], 1500); //  , ,   1.5 ,  . player.cancel(); 

And, by the way, for those who are used to using CSS animations and transitions, I want to say that Web Animations always trigger events at the end:

 var player = snowFlake.animate([ {transform: 'translate(' + snowLeft + 'px, -100%)'}, {transform: 'translate(' + snowLeft + 'px, ' + window.innerHeight + 'px)'} ], 1500); player.onfinish = function(e) { console.log('per aspera ad terra!'); } 

Try it!

All this functionality is under the hood of Chrome 36, which has already been released the other day! If you want to try it, do it on a native implementation in Chrome 36. Be that as it may, there is a polyfill that adds this functionality to all the latest browsers.

The demo of snowflakes can be viewed in two versions: on the native implementation and on the implementation using polyfiles

Share your thoughts with us.

Well, this is a small preview of what will soon be the daily development of web development, and it was released with only one purpose: to get feedback from the developers. We are not sure that we took into account all wishes or smoothed all sharp edges when working with the animation API. We see only one way to do it right: give developers a try and see what they say.

Thanks to Eddie Osmani and Max Heinritz for their help in writing this post.