Material Design Easing

This is a quick survey of the Google's Material Design Animation Spec, with the specific cubic-bezier easings from Material Design Lite. I've added velocity graphs, which I think show the shape of an animation much more clearly. I've also made a cubic-bezier generator with velocity graphs.

F ∝ ma

There is no discontinuous motion in the real world, object accelerate when force is applied - the velocity never jumps. In animation terms, this means all motion is "ease-in-out".

The first example compares a basic ease-in-out easing to linear motion. Eased motion is less jarring, and the velocity graph shows why - the velocity changes smoothly rather than jumping.

Linear Ease-in-out

Swift Move

Ease-in-out is smooth, but symmetric. Asymmetric animation - where the speed of acceleration and decelleration differ - creates a more pleasant, natural motion. Swift Move accelerates quickly, then takes longer to slow down (fast-in slow-out). It creates a lively, sprightley motion.

Ease-in-out Swift Move

Swifter Move

Google also give a fast-in very-slow-out, for an even sprightlier move.

Swift Swifter

Heavy Move

The other possible asymmetric ease-in-out is Heavy Move - Accelerating slowly and decellerating quickly (slow-in fast-out). This isn't given in Google's Material Design, but it seems more natural than a symettric ease-in-out, and could be good for a larger, 'heavier' object.

Ease-in-out Heavy Move

Entrances and Exits

When exiting or entering the screen velocity should be constant, to avoid drawing attention to it. Google provide a Swift In and Out - half Swift Move, and half linear motion.

Swift In

Swift In Ease-in

Swift Out

Swift Out Ease-out
(,,,)
Ease
Linear
Ease In
Ease Out
Ease In-Out
Swift Move
Swifter Move
Heavy Move
Swift In
Swift Out