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.
To change the easing in Quick mode:
- Click the Keyframe options button between the thumbnails.
- The transition editor will open.
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.
|Animations change at a constant speed.|
|Animations start at a medium speed, then slow towards the end.|
|Animations start quickly, then slow towards the end.|
|Animations start slowly, then finish quickly.|
|Animations start and end slowly, but move quickly in the middle.|
|Animations stay in the start position through the ease time, then jump directly to the end position.|
|Animations jump immediately to the end position.|
Easings in Advanced mode
Custom easing is available in Advanced mode and lets you create your own easing curve.
To change easings in Advanced mode:
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.
- Select the current easing from the pop-up menu.
- 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.