Newer Post

Static Typing: Why Do It?

Older Post

How to Win Back Your Productivity After a Vacation

A Beginners Bible for Web Animations

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.

You should check that link before continuing with this article as the rest of this article assumes familiarity with some of the concepts from there.

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:

See the Pen Animated Overlay Menu by Joseph Rex (@josephrexme) on CodePen.

Stripping out the transitions increases the friction

See the Pen Animated Overlay Menu - no transitions by Joseph Rex (@josephrexme) on CodePen.

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.

You should beware of will-change as its known to give odd results on some browser versions. See here for more details

If the term paint is alien to you, you should read the following:

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:

Example of an animatable property

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

See the Pen Spooky Headless Wizard by Joseph Rex (@josephrexme) on CodePen.

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:

Tools:

Resources:

We'll help you unleash.

Join the 20,000 developers who subscribe to our newsletter.

Scale your
Development team

We help you execute projects by providing trusted developers who can join your team and immediately start delivering high-quality code.

Hire Developers
code, css, animation