Mechanics

Our animation styles are used to enhance the member’s experience. Animation serves many purposes—to create anticipation, give clarification, provide feedback, and help define hierarchy.

 
 
Duration

Animations shouldn’t prevent or interfere with a user being able to get to their desired content.

Snappy / Direct
Too Slow
 
Speed

Animations should not be jarring or overly sluggish.

Succinct
Lengthy
 
Easing

Elements should have a natural feel to their motion. Using a linear ease is too robotic and can create an awkward experience.

Ease out and ease in
Linear easing
 
Mirroring

Transitional animations should be symmetrical so as to set up the users expectation.

Symmetrical animation
Disjointed transitions
 
Staggering

Animating elements with an intentional stagger helps to create hierarchy and guide a users eye.

Staggered animation
Simultaneous animation
 
Cohesive animation

The movement of elements should be consistent to avoid confusion and reduce cognitive load.

Singular direction
Multiple directions