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.

The Outliner panel also displays the layers in your document, but in a tree view.

Managing layers

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. You can also hide an element at the start or end of the timeline by setting its visibility range.

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.

Layers with visibility ranges cannot be looped.

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.

Visibility ranges

Visibility ranges are not supported for AMPHTML ads.

The visibility range of a layer controls when the element or mask is visible and editable. You might set a visibility range if you want an element to appear or disappear, or to hide an element when it's not in use so that you can focus on other parts of your document.

Layer visibility behavior

Visibility ranges are unset by default. You can set either the start or end of a visibility range, or both.

Visibility range	Behavior
Unset (default)	The element or mask appears as soon as the document loads and remains visible after animation ends.
Start is set	The element or mask appears at the start time. If set at 0 seconds, the element or mask appears when animation starts playing, which may be after the document loads.
End is set	The element or mask disappears at the end time.

The Properties panel will not be available for a layer outside of its visibility range. To freely edit an element or mask, extend its visibility range (such as by adding a keyframe) or move the timeline playhead inside the range.

Set a visibility range

To set a visibility range or adjust its boundaries, use one of the following methods:

• Right-click the layer at the point in the timeline where you want to set the visibility range boundary, then select Start visibility range or End visibility range from the pop-up menu.
• Hover over the visibility range boundary to highlight the handle (a vertical bar). Drag the handle to where you want it on the timeline. When a visibility range is unset, the handles are dark gray and can be found at 0s and at the end of the animation timeline.

1. The handle for an unset visibility range
2. The handle for a visibility range starting at 0s
3. The handle for a visibility range starting at 1s

Visibility ranges must always contain all keyframes clips, and text effects for the layer, which may constrain where you can drag the range or set range boundaries. Ranges will automatically extend to include any keyframes, clips, or text effects that you add.

You can select the handle of a visibility range along with keyframes, spans, clips, and other visibility range handles, which allows you to drag them together along the timeline in sync.

Double-click a layer within the timeline to select all keyframes, spans, clips, and visibility handles for that layer.

Setting a visibility range will remove any animation looping for that layer.

Unset a visibility range

To clear the start or end of a visibility range, use one of the following methods:

• Double-click the handle.
• Right-click the handle and select Reset range boundary from the pop-up menu.

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.

You can select, hide, lock, or set the visibility range for mask layers, just like for 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.

Learn more about masks.

Video and audio tracks

Video tracks and audio tracks are types of layers that can contain media clips.

Video tracks are available in video ads and animated GIFs. They support hiding, locking, reordering, keyframes, visibility ranges, and masks.

Audio tracks are only available in video ads. As they don't have any visible element, they don't include functionality such as hiding, visibility ranges, animation, or masks, but they can be locked to prevent audio editing.

Learn more about video and audio tracks.