Animation

Enhance The Experience

Animated motion can be calibrated using bezier curves. Changing the curve’s shape will affect the rhythm of the object or element’s movement.

Animating In and Out

Usage

Ease-in values are reflected by the grade of the curve closest to the beginning of the animation. Ease-out values are reflected by the grade of the curve closest to the end of the animation.

The steepness of the curve at either point will result in a respectively speedier ease-in or ease-out. Easing both sides evenly should be avoided, since it can cause a bouncing motion that distracts the customer.

Example - Ease-in

Do this.

Not this.

Example - Ease-Out

Do this.

Not this.

Animating Point-to-Point

Usage

We prefer a fast ease-in with a slow ease-out, which puts a stronger focus on the ending of the motion. Applying these easings ensures that point-to-point animations are smooth and appear more natural.

Example - Fast out, slow in

Do this.

Not this.