Animations

Follow these guidelines when we adding animations into our product. Have questions? Talk to Richard at richard@customer.io.

When do we use them?

Overall, we want animations to make Customer.io feel more responsive and intuitive to people, but without being over the top. We'll use them to:

Draw attention to change, but soften harsh cuts: "Hey, this new thing happened!"
Explain the changes: "This is a new element that allows you to edit the thing you clicked on!"
- To establish a connection between two states by animating the shared content
For fun (sparingly), and to convey our brand.

How to use them

Animations should be slow enough to give users the possibility to notice the change, but at the same time quick enough not to cause waiting.
Animations should begin within 100ms of a user performing that action. This ensures that the user connects the animation to their action.
Items which enter the screen should exit in the same place.
Animate as few items as possible at one time: if several elements are being animated, define one central object and animate it first.
When a moving object transforms in size, it should move along an arc rather than in a straight line.

Duration

Three numbers to remember:

100ms: Under this, and the user feels it's instantaneous
1 second: After this, and the user's flow of thought is interrupted
10 seconds: The upper limit of attention.

Length

Animations should be between 200 and 500ms, depending on complexity. Shorter durations for simpler effects, longer durations for more complex movements:

Sometimes it's better for the animation to be a little longer, so the user doesn't feel surprised by how quickly something is done. A few more guidelines:

For buttons and dropdowns: 100-250ms
For panels and modals: 250-400ms
Page transitions: 500ms +

Loading Animations

Where applicable, we can use our branded loading animation for processes taking up to 10 seconds. It's been shown that users were willing to wait longer and abandon rates were lower with branded animations.

For loading operations taking longer than 10 seconds, percent-done progress indicators should be used if possible.

Easing (or, obey the laws of physics)

It’s important for animations to mimic the laws of physics so that they feel natural and intuitive to users. In web animation terms, this is called "easing."

For objects entering the view, use ease-out
For objects exiting the view, use ease-in
For moving an object from point to point, use ease-in-out (when in doubt, use this)
When animating a collection of items, stagger the interval between animations with less than 100ms. See an example of good (left) vs. bad (right).
When dragging-and-dropping an item amongst other items, move the existing items to accommodate the new one. Here's an example.