About easing

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

Easing in Quick mode

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

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 default easing presets. 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 easing presets

Easing preset	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.

Easing in Advanced mode

Advanced mode gives you additional easing options:

• Change the easing for multiple spans at the same time.
• Specify custom easing.
• Save custom easing as a new preset to easily reuse it for other spans.

To change easing in Advanced mode:

1. Right-click a span with animation 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. (Only spans with animation will have their easings modified.)

2. Select one of the easing presets from the pop-up menu, or select Easing options... for visualisations of the easing curves or to specify custom easing.

To create custom easing:

1. Right-click a span and select Easing options… to open the easing dialogue.
2. Use one of the following methods to change the easing:
   • Drag the control handles to adjust the shape of the easing curve. 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.
   • In the Cubic-Bézier field, enter the cubic-bezier() functional notation of the Bézier curve that you want. If you enter an invalid value, the field will be underlined in red.
3. Optionally, save this custom easing as a preset by clicking Save as new preset.
4. Click Apply to use this custom easing for the selected span or spans.
   

Custom easing presets

• Quick access. You'll see easing presets listed as options in the pop-up menu when you right-click a span.
• Easy identification. Preset names display on the Advanced mode timeline.