Search
Clear search
Close search
Google apps
Main menu

Create animations in Advanced mode

In Advanced mode, you animate each element by creating keyframes on the timeline. The timeline is a schematic representation of your animations, and the keyframes indicate where animations start and end. You position 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 the each animation takes. For example, to make an animation change happen faster you need to create a smaller space between your keyframes. 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 elements you want to animate. This can include moving and rotating elements, changing their color, changing their size, or changing any other parameter.

To loop an animation:

  1. Click the loop icon  on the animation layer that you want to loop.
  2. In the pop-up menu, select an option:
    • Infinite - The animation will loop infinitely.
    • The number of times you want the animation to repeat.
    • None - The animation will not loop.

To extend the length of the timeline:

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

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

To change the scale of the timeline:

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

Was this article helpful?
How can we improve it?