Animations for the Web

There is no shortage of animations on the webernetz^™ these days, and libraries to support them. Some web animations are good, and some gratuitous. Recently, I was fortunate to work on a few projects that required animations; therefore, I got a refresher on some concepts. I was also able to extend my knowledge in a few important areas, which I would like to share.

CSS properties to avoid

When animating with CSS, there is one key thing you’ll want to avoid: reflow. When an object changes position or dimensions, it can trigger the browser to process reflow. For example, try to avoid animating positioning using top, bottom, left, right, margins, or even borders. Instead, leverage the transform property and translate functions.

// Avoid reflow: DON'T DO THIS
.animate {
    left: 100px;
    top: 50px;
}

// Avoid reflow: DO THIS
.animate {
    transform: translate(100px 50px);
}

Here is a quick video overview of browser reflows, how they’re caused, and how one might avoid them from Google’s Lindsey Simon.

Animating with CSS or Javascript

It does not have to be binary. Yes, you can animate with CSS only, but typically you might need Javascript to toggle classes on your objects. I’m not certain that there is an absolute difference in performance between using pure CSS vs. Javascript to animate elements. I’ve used Animate.css most often, and recently was able to kick the tires with Velocity.js. The differences were imperceptible to me.

Chrome’s DevTool Animation Inspector

Learn to use it and abuse it. This tool automatically detects animation groups and allows you to scrub through them, and make adjustments on-the-fly. My coworker Eric Fuller first introduced me to the Animation Inspector, and it quickly became my go-to debugging tool.

One main feature is that you can also slow down you animations after being recorded in the Animation Inspector, allowing you to catch easing and timing issues.

Here is Chrome’s documentation on how to access the Animation Inspector:
https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/animations?hl=en

Accessibility considerations

Introducing movement on the screen may help enhance the experience for some. However, be considerate of users who have vestibular disorders or seizures, and make sure your experience is ultimately inclusive, and not exclusive. WCAG 2.0 offers some guidelines on working with flashing content.

Keyframe syntax

I’ll let the code below speak for itself…

@keyframe name {
    from {}
    to {}
}

// Is the same as...
@keyframe name {
    0% {}
    100% {}
}

// Declarations in a keyframe that are qualified with !important are ignored
@keyframes name {
    from { margin-top: 50px !important; } // ignored
    to   { margin-top: 100px; }
}

Nail your easing

Nothing in nature moves in a straight line. Easing in web animation allows us to control the acceleration and deceleration of elements to give a better sense of natural, personal movement. CSS gives us a few easing keywords: ease, ease-in, ease-out, ease-in-out, steps and linear. However, you’ll quickly find that these can become limiting when working on complex animations, and you may want to generate something more custom, which is where cubic Bézier curves come in. Don’t worry, it may sound mathematical or literally complex, but that is where the following tools come in handy:

Easings.net – allows you to quickly, visually compare and generate the CSS for a slew of easing functions.

CubicBezier.com – allows you to generate unique cubic Bézier easing, as well as compare against traditional easings.

Leverage hardware acceleration with CSS

Many computers these days support hardware acceleration because they’re equipped with suitable and robust graphics cards. Many browsers leverage this to offload heavy processing to the GPU (Graphics Processing Unit), and certain CSS 3d properties help trigger this, like translateZ() and translate3d(). I recently discovered this when I changed an animation from using scale() to scale3d(). Initially, the animation was quite jittery (aka, jank), but suddenly became smoother with the slight adjustment.

Easing on outta here (See what I did there? ? ) 

Making a truly successful and engaging animation is an art form, which takes time and practice. I’m still trying to figure out what all those graphs mean in Chrome’s Timeline. My advice: aim big, but start small.