Create animations in Advanced mode

Timeline Advanced Mode Overview

In Advanced mode, you animate each element by adding keyframes to the timeline to indicate where animations start and end. You edit elements at specific keyframes, and Google Web Designer creates the in-between animation.

The space between keyframes, called a span, determines the amount of time that each animation takes. For example, to make an animation quicker, you should place your keyframes closer together. Easings let you change the acceleration and deceleration of a transition.

To animate an element in Advanced mode:

1. Add a keyframe by right-clicking the timeline and selecting Insert keyframe.
2. Change the element's properties to how you want them at the end of the animation. For example, you could change the element's position, colour or opacity, or even all three properties.

You can add more keyframes to string together multiple spans of animation for the same element. If you want the element to stay unchanged for a period of time before you animate it again, add a keyframe without changing any properties.

Example

The above animation of an image fading into view, pausing, then sliding to the left uses four keyframes.

1. The first keyframe sets the state of the element at the start of the animation. In this case, the image has its opacity set to 0, so it isn't visible.
2. At the second keyframe, the element's opacity is set to 1 (100%). The image fades into view over the course of the preceding one-second span.
3. At the third keyframe, the element has no changed properties compared to the previous keyframe. No animation occurs during this half-second period, so the image stays the same.
4. At the last keyframe, the element's position changes so that the right half of the image is visible on the stage. The image slides to the left to reach that position, taking one second to do so.

To see the properties specified for a given keyframe, right-click the keyframe and select Animated properties from the pop-up menu.

How to add a keyframe

There are multiple ways to add a keyframe. On the timeline, select the layer of the element that you're animating and move the playhead to where you want the keyframe. You can select multiple layers by pressing Ctrl/⌘ during selection. Then use one of the following methods:

• Right-click the timeline and select Insert keyframe from the pop-up menu.
• Press F6.
• Select Timeline > Add keyframe from the Edit menu.

If you change an animated element's properties when the playhead isn't at a keyframe, Google Web Designer automatically adds a keyframe at the playhead position.

Timeline work area length

If you want to add a keyframe past the end of the timeline, you can extend the timeline work area length. For example, the default length is 12 seconds, but you might want to add a keyframe at 15 seconds. To change the length of the timeline work area:

1. Click the length indicator at the top of the timeline.

   

2. Enter a new value for the timeline length (in seconds). The minimum value is 12 seconds.
3. Press Enter.

The timeline work area must be long enough to fit your animations. Any unused part of its length won't affect your animation playing time.

Video ad timelines can be a maximum of 5 minutes in length.

Timeline scale

Drag the zoom slider near the top right of the timeline to adjust the scale of the timeline. Zooming in can be useful if you have keyframes positioned closely together. The zoom level only changes your view of the timeline, and doesn't affect the timing of any animations.

If you want to change the length of an animation consisting of multiple keyframes, you can scale multiple spans to make them proportionally longer or shorter.