Adding user interfaces to animations helps websites and apps feel more open and interactive. A side menu that slides seamlessly off screen offers a much better user experience than a menu that completely disappears when you close it.
Web animations have been created so far either via CSS transitions, CSS keyframes, or an external library like Animate.css or Velocity. Thanks to a new native JavaScript API, any HTML element can now be freely animated without ever having to leave our.js file.
Create Entertainment
Let's create a super simple example, once the old-fashioned CSS way, then with JavaScript Web Animations to showcase the awesomeness of the new API.
The editor below contains two HTML divs, which change their color when clicked on move to the right. The square is animated through CSS code>@keyframes, and the circle is animated via the Web Animations API.
The CSS Treatment
Our CSS animation is represented in a block of code>@keyframes representing a timeline of all the transitions. Once we have our choreography defined, via the animation property, we can map it to a selector, and these are options.
We want the animation to start with user interaction so we also need to build an on-click event listener which adds a CSS class to the desired element:
var square = document.getElementById('square');
square.addEventListener('click', function() {
square.className += " animate";
});
Although it works pretty well, as we describe what happens in the stylesheets, the CSS approach seems quite non-intuitive, but actually start it in the JavaScript. We have also very limited control over the animation once it is invoked. Switching to the Cloud Animation API will solve both of these problems.
The JavaScript Treatment
We can define our JavaScript animation using nearly the same transitions that we used in the example CSS:
Every entity in the array represents an animated state. The states are distributed evenly in time ( 3 states — 0%, 50%, 100%) unless we change the timing using the offset option, as we did with the middle state.
After our animation array has been defined we can invoke it using the animate) (method. An object with the same options as the CSS animation property is taken as a second argument, although with slightly different names (e.g. animation-fill-mode is filled, animation-iteration-count is iteration, etc.).
The JavaScript approach is much more organized, as you can see, with the animation stored in a variable and the animate) (method used to invoke it whenever we need to.
Entertainment Access
The Web Animation API also allows for the easy control of an animation's playback in a number of ways. The method animate) (returns an animation object that we can save in a variable and later use to refer to that animation.
var animation = elem.animate(transitions, options);
The interface delivers the following methods for us:
1. pause() - Freezes the animation in its current state.
2. play() - Resumes the animation or restarts it if it has finished.
3. reverse() - Plays the transitions backwards.
4. finish() - Goes to the end of the animation (or the beginning if reversed).
5. cancel() - Stops playback and returns to starting state.
Properties Listeners and Events
The returned animation object from animate) (contains several useful properties which give us access to options such as the current time, playback rate and others. Although some of the properties are read-only, most can be used as setters and getters.
In addition, the Web Animation API provides us with two useful event handlers for stopping or canceling the animation:
Supporting and Performing
Most of the Web Animation tools are freely available in Chrome and Firefox, with Edge and Safari (caniuse) implementations in work. There is also a well maintained open-source polyfill that can be used for full browser coverage while waiting.
There should be no difference when it comes to performance compared to standard CSS transitions, because browsers use the same engine for both. If you stick to animating only properties that do not cause redrawings, such as transform and opacity, animations will maintain a steady rate of 60fps.
Concluding
The Web Animation API provides developers with an amazing new way of making and manipulating web animations using only pure JavaScript. This is great news for animations invoked on user interaction or other dynamic events, since the entire animation can be done in the controller code, without having to jump to a CSS file for the actual transitions.
This article covered most of the new API's features, but if you want to learn more here are a few excellent resources that we highly recommend:
1. Using the Web Animations API on MDN
2. Animatelo - A rework of Animate.css using the Web Animation API
3. Let’s talk about the Web Animations API - A 5-part tutorial by Daniel C. Wilson
As a reputed Software Solutions Developer we have expertise in providing dedicated remote and outsourced technical resources for software services at very nominal cost. Besides experts in full stacks We also build web solutions, mobile apps and work on system integration, performance enhancement, cloud migrations and big data analytics. Don’t hesitate to get in touch with us!
This article is contributed by Ujjainee. She is currently pursuing a Bachelor of Technology in Computer Science . She likes most about Computer Engineering is that it allows her to learn and be creative. Also, She believes in sharing knowledge hence is very fond of writing technical contents for the same. Coding, analyzing and blogging are things which She can keep on doing!!
Comments