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

About layers

Along with creating animations, the Advanced mode timeline lets you see how elements are layered on the stage. Each element is represented by a layer in the timeline, providing an easy way to work with elements.

Add a layer

When you create an element or mask, a layer is automatically added to the timeline.

Masks are indicated by the symbol in front of the layer name.

Reorder layers

The order of the layers in the timeline represents how the elements would stack if they overlapped. Use one of the following methods to move a layer within the layer stack:

  • Select the layer and drag it to the level where you want it to be.
  • Use the layer buttons in the Selection tool options bar to send layers up or down, or to the top or bottom. The timeline reflects changes made with the layer buttons.

Mask layers always remain directly under their host element's layer.

Lock a layer

Locked layers can't be selected or edited. You might want to lock an element if you've finalized its design and don't want to accidentally change it. To lock an element:

  • Click the checkbox under the lock icon on the element's layer.
  • Click a checkbox, then drag your mouse pointer across multiple checkboxes to lock multiple layers at once.
  • Click the Lock all layers icon at the top to lock or unlock all layers.

Hide a layer

Hidden layers are invisible on the stage, and also can't be selected or edited. You might want to hide an element so you can work with elements behind the hidden one. To hide an element:

  • Click the checkbox under the eye icon on the layer that you want to hide.
  • Click a checkbox, then drag your mouse pointer across multiple checkboxes to hide multiple layers at once.
  • Click the Hide all layers button at the top to hide or show all layers.

If you want an element to be invisible in browser previews and published files, convert it to a guide layer.

Duplicate a layer

Duplicating a layer creates a copy of the element and any keyframes. To duplicate a layer:

  • Right-click the layer name or ID and select Duplicate layers from the pop-up menu. The new layer appears immediately above the original one.
  • You can select multiple layers for duplication using Shift+click for multiple contiguous layers, and Control+click (Windows) or Command+click (Mac) for discontiguous layers. Right-click any selected layer's name or ID, and select Duplicate layers to duplicate all selected layers.

Mask layers can't be duplicated.

Loop the animation for a layer

  1. On the timeline, click the Set animation repeat  button on the animation layer that you want to loop.
  2. In the pop-up menu, select an option:
    • Infinite - The animation loops infinitely.
    • ___ times - The animation loops to play the specified number of times in total.
    • None - The animation does not loop.

Looping a layer is different from looping animation playback.

  • Looping a layer changes the animation so that the loop plays in the published document.
  • Looping the animation preview by clicking the Repeat play button only affects the animation on the stage that you see when you press Play on the timeline.

Toggle guide layers

Guide layers

Guide layers act like regular elements while you're working on the document, but they don't appear in browser previews or published files. You can use guide layers to add notes directly within the layout, to construct a blueprint for your design, or to prototype additions to your document.

To convert a layer to a guide layer:

  1. Right-click the element on the stage or in the timeline. You can also select multiple elements, then right-click the selection. (You can only include masks in the selection if you also select their host elements.)
  2. Select Guide layer from the pop-up menu.

The guide layer icon appears before the layer name in the Advanced mode timeline. When a guide layer is selected on the stage, it's outlined in orange.

To convert a guide layer back to a regular element, right-click it and uncheck Guide layer in the pop-up menu.

Guide layers are absent from published files, so they aren't factored into the published file size. Any events, CSS rules, or dynamic data bindings that reference guide layers are also removed from the preview and the published files.

Mask layers

Each mask is represented by a layer in the Advanced mode timeline with the symbol in front of the layer name.

Mask layers can be selected, hidden, and locked, just like element layers. But they behave differently in the following ways:

  • Mask layers always appear directly under their host element's layer. When you reorder a mask layer or the host element layer, both layers automatically move.
  • Deleting a host element also deletes its mask.
  • You can only delete a mix of element and mask layers if the host elements for the masks are included in the selection.
  • You can't duplicate a mask layer.
  • Hidden masks, unlike hidden elements, can be edited.
  • You can't convert a mask layer to a guide layer, although if the host element is a guide layer, the mask will also be absent from browser previews and published files.
Was this helpful?
How can we improve it?
Clear search
Close search
Google apps
Main menu
Search Help Center