Create animations in Advanced mode

In Advanced mode, you animate each element by creating keyframes on the timeline. The timeline is a schematic diagram of your animations, and the keyframes indicate where animations start and end. You edit elements where you want them to be at specific keyframes, and Google Web Designer creates the in-between motion.

The space between keyframes, called the span, determines the length 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:
    • For individual elements, right-click the element's timeline where you want to add the keyframe and select Insert Keyframe from the pop-up menu.
    • For individual and multiple elements: select the timeline tracks where you want to add keyframes, click the timeline where you want to add the keyframes, and press F6.
    • For individual and multiple elements: select the timeline tracks where you want to add keyframes, click the timeline where you want to add the keyframes, and select Timeline > Add Keyframe from the Edit menu.
    • Once an initial keyframe has been defined, keyframes are automatically added at the playhead position when element properties are changed.
  2. Change the properties of the elements you want to animate. This can include moving and rotating elements, changing their color or size, or changing any other properties.
    • Subsequent keyframes inherit the properties of the previous keyframe unless you specify different property values.

To extend 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.

To change the scale of the timeline:

Click and drag the zoom tool at the top of the timeline to expand the timescale.

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

Was this article helpful?
How can we improve it?