For support with Google Web Designer, please visit the community.

The Advanced mode timeline

The timeline is unavailable in image ads.

In Advanced mode, you can create complex animations and set up time-based events. The animation timeline displays each element as a layer so you can animate elements individually.

Parts of the Advanced mode timeline


Each element in your document is represented by a layer.

  1. Layers - Layers determine the stacking order of elements if they overlap. You can drag a layer above or below another layer to change the stacking order.
  2. Hide layer - Use the checkbox under the eye icon to hide elements on the stage.
  3. Lock layer - Use the checkbox under the lock icon to prevent edits to elements.
  4. Loop layer - Make the animation for that layer's element repeat. Looped layers are reflected in the published document's animation.


Create and edit animations by adding keyframes.

  1. Keyframe - Each keyframe indicates the start or end of an animation.
  2. Span - The space between two keyframes is called a span, and indicates how long the animation takes.
  3. Easing - The acceleration or deceleration of the animation.

Preview tools

You can preview your animation on the stage.

  • Play and pause - Start and stop animation preview playback.
  • Loop - Toggle whether animation preview playback continually repeats. Although the preview on the stage loops, there's no effect on animation in the published document.
  • Preview range - Drag the preview range markers to limit animation preview playback to the indicated part of the timeline.

For video documents, there are additional controls:

  • Jump to first/last frame - Go to the first or last frame of the preview range.
  • Go back/forward one frame - Go to the next or previous frame.

Time indicators

The playhead indicates the current point in the animation that's displayed on the stage.

  • Playhead - To move the playhead, click the timeline on any track or layer, or drag the playhead to a new position.
  • Current time - Click the current time to change the playhead position by entering a new time.
  • Timeline work area length - The timeline work area is the available amount of time for any animation. You can extend the timeline work area length by entering a new amount of time.

The time format depends on the document type:

  • HTML5 documents - minutes:seconds.hundredths of a second
  • Video documents - minutes:seconds:frames


Timeline-related events (that occur at a specific point in time during the animation) are displayed on the Events track. (The Events track is unavailable for video ads.)

  • Add event - Adds an event marker at the same point in time as the current playhead position.
  • Add label - Adds an event label at the current playhead position.
  • Event marker - A specified point in the timeline where an event can trigger. Right-click to see associated events.
  • Event label - A specified point in the timeline that you can reference to control animation.

Advanced mode timeline settings

Configure timeline settings in Advanced mode by clicking the gear icon to the right of Layer Name. Checkmarks indicate which settings are active.

  • Hide empty layers - Select this option to hide layers without animation.
  • Lock all layers - Select this option to lock all layers. Deselect to unlock all layers.
  • Hide all layers - Select this option to hide all elements on the stage. Deselect to make all elements visible.
  • Snap to timeline grid - Select this option to align keyframes, event markers, and event labels with the timeline grid lines when you insert and drag them. Enabled by default.
    • For video ads, snapping to the timeline grid is always enabled, and this option is replaced by Snap to objects to align keyframes, clips, transitions, the playhead, and the preview range with each other.

Advanced timeline zoom

You can adjust the zoom level of the timeline by using the slider near the upper right corner of the timeline. Dragging the slider to the right expands the timeline scale so you can time animations more precisely.

Switching between Advanced mode and Quick mode

Click the Quick mode icon on the right side of the timeline to switch to Quick mode, which lets you use a simpler animation timeline.

Each point in the Advanced mode timeline with a keyframe converts into a Quick mode thumbnail, preserving your animation. For more complex animations, spans and easings may be locked against editing in Quick mode.

Video ads

Timelines for video ads differ in a couple of ways:

  • Layers can include video and audio tracks
  • No Quick mode
Was this helpful?
How can we improve it?
Clear search
Close search
Google apps
Main menu
Search Help Center