Why We Animate User Interfaces
Jack Cross
Engineer at The Palmer Group

When I first started building user interfaces, I found animation interesting but mostly thought of it as a nice-to-have in the broader goals of a website. I built many websites with little to no animation and was able to sleep soundly each night.

Then I came across some better informed opinions on why animation is important.

Sudden changes don’t exist in the real world!

-- Glen Keane, Disney animator

We are biologically trained to notice motion: evolutionarily speaking, our survival depends on it. For this reason, animation when done well can guide your users.

-- Sarah Drasner, author of SVG Animations

Web developers, do more animated transitions. Things that blink in and out are no fun.

-- Sunil Pai, engineer at Facebook

Armed with this knowledge, I could never look at websites the same way again…

My eyes!

Beyond being visually appealing and a closer approximation to the real world, here are the main reasons we at The Palmer Group spend time animating our products.

Communication

Without animation, we are asking the user to process each visual update as a completely new screen. By adding transitions, we can communicate how different views in our site are related. This additional context can help the user create a more accurate mental model of how the site fits together.

Communication

Transitioning shared elements between our blog's list and post views makes it especially clear to users that the card they selected and the post they are reading are the same entity.

Trust

The extra polish of animation can give our websites a high-quality feel that helps establish trust with our users. If we sweat the details to build a polished website, users should expect that we take the same level of care in other areas of our business.

Trust

Animating our mobile menu is a small change that gives our site a higher-quality feel than if we had provided no animation.

Delight

In addition to the functional reasons to animate, we also want our products to be a joy to use. Small, unobtrusive animations can highlight a specific action and make it really fun to perform!

Delight

Adding horizontal movement to our buttons makes them more exciting to interact with and gives a hint that they might lead somewhere interesting.

How can I get started?

Since a quick NPM search for "animation" returns almost 5,000 results, it can be daunting to get started. While we are continually experimenting with what's out there, here are a few of our current favorite animation libraries.

react-spring

Described as "a set of simple, spring-physics based primitives," we have found that react-spring allows you to create a wide range of animations in declarative React code while also providing sensible defaults to get up and running quickly.

As an added bonus, it is already shipping with a React Hooks API!

import React from 'react';
import { useSpring, animated } from 'react-spring';
 
export function Example() {
  const [props] = useSpring({
    opacity: 1,
    from: { opacity: 0 },
  });
 
  return <animated.div style={props}>Nice!</animated.div>;
}

react-flip-toolkit

When we need to create animations that involve significantly changing the underlying DOM, we turn to the FLIP technique and specifically react-flip-toolkit.

By associating elements with a shared flipId, react-flip-toolkit will animate the element that is entering the DOM from the position and scale of the element that is leaving the DOM using transforms.

Further reading

For further reading, some great articles on animation are the following:

Good to great UI animation tips - Pablo Stanley

Creating Usability with Motion: The UX in Motion Manifesto - Issara Willenskomer

Material Design's motion guide

Jack Cross
Engineer at The Palmer Group
Copyright © 2018 The Palmer Group. All Rights Reserved.