There are various articles out there that index tools that can be used to perform animations on the web but they often just enlist tools without an explanation of why and when to use the listed tools.
This is to serve as a guide and also a learning path for anyone looking to get into web animations the right way.
You could slap redundant animations on existing websites and feel happy about that, but it usually would not give your users the best experience. Animation should be planned in every step of your application interface development like we see in most mobile apps. Animation with design can help create perception of your product and company especially in an age where companies do not need to have offices and buyers would pick shopping from the comfort of their homes over visiting stores.
On the web today there are three major approaches to animations which are:
- CSS Transitions
- CSS Keyframe animation
- JavaScript animation
For a detailed comparison of all methods, read how web animation works.
CSS vs JavaScript Animation
CSS Transition and Keyframe Animation
It is common to start with CSS transition as we often change states in applications. Rather than having snappy state changes we like to give a visual ease to users by employing transitions to state changes.
You can see from the following example:
Stripping out the transitions increases the friction
When you grasp the concepts of transitions and move ahead to CSS keyframe animations, you can create more interpolations for your animations.
CSS animations are known to be performant when you only animate the transform
and opacity
properties.
Performance can be further improved by offloading the calculations to the GPU. This is commonly referred to as hardware acceleration.
A CSS animation can be hardware accelerated by setting any of the following CSS properties to the element that will be animated:
.animateMe{
will-change: transform;
transform: translateZ(0);
perspective: 1000px;
backface-visibility: hidden;
}
It might be a fail-safe to have all of them on an element that will be animated, but from my tests will-change
and perspective
are usually enough to have an animation with no paint.
If the term paint is alien to you, you should read the following:
- Avoiding unnecessary browser paints
- High-performance animations
- And a free Udacity course on browser rendering
If you do not know where to start with CSS Animations, you can start by applying animate.css to your websites.
JavaScript animations
Animating with JavaScript allows for more control of how the animations react to events and complex states. There is a common misconception that JavaScript animations are not as performant as CSS animations, but that is very wrong and you can understand why from this article by Jack Doyle.
Since the implementation of the Web Animation API has been progressive with most browser vendors and there is a reliable polyfill, there is no reason not to start using it already.
You can start with this introduction to WAAPI and look at how WAAPI compares to CSS keyframe animation. There is also a community group of sites for everything WAAPI.
The web animation API also has an equivalent of animate.css called animatelo.
To control sequences of your animations and timelines, just-animate is a great library that plugs into web animation API. It also comes with a player to debug your animations.
What should I animate?
Before listing more plugins, you should know what the browser is capable of taking as input for animations and the kind of animations that can be done on the web. They are:
- DOM animation
- SVG animation
- 2D Canvas animation
- 3D animation and WebGL
DOM animation
You can animate elements in the Document Object Model by setting CSS properties on them. Not all properties are animatable however.
MDN used to list in its reference if a property can be animated or not. Now there is animation type instead. Discrete animations may not be interpolated so applying a property that has a discrete animation type to an animation will not yield rather snap movements which may not be the expected outcome of the animation. A good example of such property is display
as shown:
You could always look up a CSS property on MDN but as mentioned earlier try sticking with transform
and opacity
. The transform property currently accepts values for translate
(moving elements on the X, Y, and Z axis), skew
, rotate
, and scale
. It also takes perspective
which is not often used but can be a replacement for the perspective property. It is useful when you just have to change perspective at a specific interpolation point of your animation. There is a matrix
function that can combine all functions, but it is too complex to be derived by human effort. You can give it a try with Eric Meyer's matrix tool. You can also look up more on the transform property functions.
SVG animation
SVG (Scalable Vector Graphics) is a format for vector graphics that can be used on the web. Most of what applies to DOM animations applies to it as well. However, because SVG does not abide by the box model transforming its sub elements can be tricky. Sara Soueidan has a detailed series to help understand the SVG coordinate system and Joni Trythall's SVG pocket guide is really handy.
2D canvas animation
Canvas allows programmatic generation of images and animations. Unlike DOM and SVG animation, canvas can handle a lot of visual objects while maintaining great performance. For an easy entry into canvas animations, particle.js is worth taking a look into.
3D animation and WebGL
3D graphics can also be created with canvas in a webgl context. The webgl API may seem daunting to start 3D animations with and for that THREE.js was created. Used along with RequestAnimationFrame, you can create stunning 3D animations. If you have used Blender, it offers the basic shapes for 3D creation as seen in Blender and you can also load models made in Blender and other 3D software to the web with THREE.js.
After understanding basic 3D on the web, you may start looking into vertex shaders which are achieved with GLSL an OpenGL language similar in syntax to C programming language.
If all these sound fun to you and you need an opportunity to try the animation techniques creatively, you can join Creative Coding Club. To find other web animators for a chat, join the animation at work slack.
Books:
- CSS Secrets Chapter 8 - Lea Verou
- SVG Animations - Sarah Drasner
- Animation At Work - Rachel Nabors
- SVG Essentials - Amelia Bellamy-Royds
- SVG Colors, Patterns, and Gradients - Amelia Bellamy-Royds
- SVG Text Layout - Amelia Bellamy-Royds
Tools:
- Greensock GSAP - Tweens, Timelines, and whole lot more plugins for cool animations
- Velocity.js - Tween and Timeline library
- Popmotion - Tween and Timeline library
- Kute.js - Tween and Timeline library
- Just Animate - WAAPI based Tween and Timeline library
- Anime.js - Tween and Timeline library
- Mo.js - Motion graphics for the web for smoke effects, sparks, and other cool effects
- Pixi.js - 2D animations with webgl engine
- p5.js - An easy to use drawing library
- Matter.js - 2D Physics Animation Engine
- Dynamics.js - Physics-based animation library
- SpiritApp - A tool for inspecting and debugging animations
- Haiku - Create UI components and build them into complex web animations
- BodyMovin - Convert After Effects animations to HTML and SVG animation