Skip to main content

Easings

Control the rate of change over time.

The purpose of animations isn't simply to look nice. Well-chosen animations help users understand the flow of the assessment, and the animations can mimic physical movement across space. In the real world, however, the rate of change over time is not constant. For example, when you drop a ball, it starts out slowly, but due to gravity it accelerates as it approaches the ground. Similarly, when you walk, you start out slowly, accelerate, and then slow down as you approach your destination.

The easing property of a transition defines the rate of change over time. The default is Easings.linear, which is a constant speed over time. This appears unnatural to the human eye because it doesn't mimic the real world. It gives a "conveyor belt" effect, where everything moves at the same speed.

Modern user interfaces use a variety of easings to make animations appear more natural. Along with linear, available easings in m2c2kit1 are:

  • quadratic
  • cubic
  • quartic
  • quintic
  • sinusoidal
  • exponential
  • circular

In addition to the form of the easing, the easing can be applied to the only the beginning of the transition ("In"), only the end of the transition ("Out"), or both ("InOut"). For example, Easings.quadraticInOut is a quadratic easing applied to both the beginning and end of the transition.

This interactive page demonstrates different easing functions.

tip

Confused about all the easing options? Just use Easings.quadraticInOut. If you don't like it, try another easing!

Below, the transition from the first to the second scene uses easing: Easings.quadraticInOut. The return transition does not specify an easing, which defaults to Easings.linear. Although both scene transitions take 750 milliseconds to occur, the first seems more natural and makes the interface feel more responsive.

Loading...
Explore:
  • Using animation mathematics, you can make custom transitions. In this example, a custom easing function provides a bounce transition in which the second scene slides past its destination before bouncing back.

Footnotes​

  1. The easing functions in m2c2kit are based on Robert Penner's easing functions. ↩