Search
Clear search
Close search
Google apps
Main menu

About easings

Easings let you change the acceleration and deceleration of an animation transition. Google Web Designer gives you the five standard easings defined in the CSS3 specification, as well as step transitions and a custom easing option in Advanced mode.

Easings in Quick mode

In Quick mode, the same easing applies to all animated elements between thumbnails.

If you edit easings in Advanced mode, you may see "Mixed" displayed as the easing type when you switch to Quick mode.)

To change the easing in Quick mode:

  1. Click the Keyframe options button  between the thumbnails.
  2. The transition editor will open.
  3. In the transition editor, click the arrows to cycle through the standard easing types. You can also change the duration of the easing by entering an amount of time in seconds, or by clicking the time field and dragging left or right.

Default easings

Easing type Description

Linear
Animations change at a constant speed.

Ease
Animations start at a medium speed, then slow towards the end.

Ease-out
Animations start quickly, then slow towards the end.

Ease-in
Animations start slowly, then finish quickly.

Ease-in-out
Animations start and end slowly, but move quickly in the middle.

Step-end
Animations stay in the start position through the ease time, then jump directly to the end position.

Step-start
Animations jump immediately to the end position.

Easings in Advanced mode

Custom easing

Custom easing is available in Advanced mode and lets you create your own easing curve.

To change easings in Advanced mode:

  1. Right-click the span whose easing you want to modify. To edit multiple easings at the same time, select contiguous spans by using Shift + click or discontiguous spans by using Control + click (Windows) or Command + click (Mac), then right-click one of the selected spans.

  2. Select the current easing from the pop-up menu.
  3. In the easing dialog, you can select a standard easing type, or create a custom easing. To adjust the easing curve, drag the control handles. The angle of the control handle controls the amount of curve, and the length of the handle controls the strength of the acceleration or deceleration.
Was this article helpful?
How can we improve it?