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.

Note: Different easing options are available for text effects.

Easing in Quick mode

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

If you edit easing 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 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 visualizations 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 dialog.
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-bezier field, enter the cubic-bezier() functional notation of the Bézier curve 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

If you'd like to reuse a particular custom easing for multiple spans, save it as a preset. Presets offer the following advantages:

• 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.

Custom presets are saved for your personal instance of Google Web Designer and can be used across different documents. If you open a document containing a different user's custom preset, the easing will display as "custom" instead of using the preset name. The easing curve itself will be unchanged.

To save a new custom preset, create custom easing in the Easing options dialog and click Save as new preset to give it a name. Preset names and cubic Bézier curves must be unique. If any existing spans have the same custom value, they will now display the custom preset name.

To rename a custom preset, double-click it, or hover over it in the Easing options dialog and click the pencil icon that appears next to the preset name. Edit the name and press Enter. Any spans that used this preset will now display the new name.

To delete a custom preset, hover over it in the Easing options dialog and click the trash icon that appears next to the preset name. Any spans that used this preset will be unchanged except that they will now display as custom.

You can't edit the curve of an existing preset. Instead, create a new custom preset and apply it to the span or spans that you want to change.