Animations are one of the many tool developers can use to improve the UX on a web application. A well-placed animation can bring the user’s attention to something important. They may also indicate that the system is working on some long-running operation, even though no more precise feedback can be provided.
In this article, I will present a couple of modern tools available to front end developers to add animations to Web pages. We’ll start by seeing how to do it like in the old days, using JavaScript code; then we’ll explore more modern declarative approaches, using CSS and SVG.
As an illustration, I will use basic animation throughout this article. Let us start with a straightforward scenario: assume we have a blue square like in the following snippet. We just want it to move, from left to right. That’s it.
<div class="square"></div>
.square {
width: 50px;
height: 50px;
background-color: blue;
position: absolute;
}
Using code…
In practice, what we want is to have the square position changing from time to time, regularly from 0px to the end of the screen.
The simplest way to do that is to use the well-known JavaScript time delaying functions: setTimeout and setInterval. What we do is then, every 30ms, add 1px to the absolution position of the square… and it works!
https://codepen.io/maurelio1234/pen/wvMBYZQ?editors=1111
left = 0;
square = document.querySelector(".square");
function animate() {
left += 1;
square.style.left = left + "px";
}
setInterval(animate, 30);
One of the problems with this approach is that your animation keeps running even when your tab is hidden, consuming resources. You also need to decide on the frequency you’ll use to call your animation and handle the cases where your frame will take longer to draw than the chosen rate.
To avoid that, we can use requestAnimationFrame. It tells the browser that you are ready to produce a new animation frame. The browser is responsible for calling you at a predetermined frequency, usually 60hz or less, if the system has not enough resources.
https://codepen.io/maurelio1234/pen/NWxPEGV
left = 0;
square = document.querySelector(".square");
function animate() {
left += 1;
square.style.left = left + "px";
requestAnimationFrame(animate);
}
animate();
Animations are not a complex concept, and as it happens usually, the easiest concepts get finally automated in one way or another.
In the next two sections, we’ll see the CSS and SVG approaches for that.
CSS animations for web pages
Modern web pages are full of CSS since it is handy to define how the elements of the page should look in a very reusable way. CSS is also more and more used to define how these elements’ looks change over time, for example, in response to mouse and keyboard events.
A natural extension of our model is to tell the browser to animate page elements from one state into another.
To do that, we use the animation property. It describes an animation in terms of duration, delay, repetitions, etc. This property is linked to a set of keyframes that define different reference points during the animation. The browser is responsible for computing the intermediate states between them.
https://codepen.io/maurelio1234/pen/oNbgQrQ
.square {
animation: 15s myanimation;
}
@keyframes myanimation {
from { left: 0px; }
to { left: 100%; }
}
SVG animations for web pages
CSS animations are nice to be applied to elements of the DOM and on their states.
However, when one needs too much finer-grained control on the animation, one usually needs to rely on JavaScript code to animate drawings on a canvas element.
The problem with the canvas API is that it is more suitable for cases where scalability is critical, like drawing thousands of elements. Oh, and the worst to use the canvas API, you need to write code!
Using SVG, you can define elements and their behavior declaratively as part of your page DOM.
The next code snippet illustrates that. Differently from the previous examples, I do not use any HTML or CSS to define my blue square. The behavior of my square is also defined declaratively, just like in CSS.
https://codepen.io/maurelio1234/pen/rNxaPWE
<svg version="1.1"
baseProfile="full"
xmlns="http://www.w3.org/2000/svg">
<rect
id="square"
x="50"
width="50px"
height="50px"
fill="blue">
<animate
attributeName="x"
from="0"
to="100%"
dur="15s"/>
</rect>
</svg>
Further Reading about animations on the web
In this article, I gave you an overview of the main techniques we can use to produce animated web pages. The presented methods ranged from JavaScript-based imperative code called periodically by the browser to declarative animations performed automatically by the browser either in CSS or in SVG.
I gathered a couple of links I hope will help you to go deeper in this animated world 🙂!
General concepts and approach
- Intro to Animation in HTML
- Canvas vs. SVG: Choosing the Right Tool for the Job
- Animate.css: Just-add-water CSS animations: Best Practices
Pure Javascript based animations
- Animating with requestAnimationFrame
- A tour of JavaScript timers on the web
- Create Beautiful HTML5 Animations With the Canvas Element
CSS
SVG
Javascript Libs
- React Spring
- Animate.css: Just-add-water CSS animations
- Snap.svg: The JavaScript SVG library for the modern web
- GreenSock: Ultra high-performance, professional-grade animation for the modern web
And get all of our best practices in Front-End development here !
