Brand Guide

Animation

Animation is not only for polish and delight, but is a vital tool for giving users a sense of context and understanding in an interface.

Principles

These are the major principles behind what makes animations more than just visual polish, and allows them to functionally benefit an experience.

Visual continuity

In the world around us objects don't instantly appear. It can be incredibly jarring when this happens in an interface, so we use motion to give context to the appearance of new elements.

Natural easing

It's unnatural for objects to go instantly from a state of movement to being completely stationary. Always use an easing curve on animations to slow down and speed up with movement.

Transitional hierarchy

When animating a series of objects consider the order that they should appear in, and how this forms a sequence or hierarchy between each of the individual elements.


Easing library

Here are a few example animation curves. Linear is put here as a baseline to compare the other curves against.

Linear

Line Created with Sketch.
cubic-bezier(0, 0, 1, 1)

Fast out slow in

Path 19 Created with Sketch.
cubic-bezier(0.4, 0.0, 0.2, 1)

Bounce

Path 14 Created with Sketch.
cubic-bezier(.46, .26, .28, 1.6)