Add event markers and event labels to the timeline

The Events track, found at the top of the timeline in Advanced mode, is where you connect timeline animation to events with event markers and event labels. Event markers let you trigger events at specific points in the timeline, and event labels let you set up events that control the animation.

Because video ads do not support events, video ad timelines do not include the Events track.

Event markers

Timeline-based events are set using event markers on the Events track. When the animation playhead reaches the event marker in the timeline, the event is triggered.

Events are not triggered during animation preview or scrubbing. You can test events by previewing your ad or webpage.

Add an event marker to the timeline

Use one of the following methods:

• Right-click the Events track where you want to add the event marker and select Add event from the pop-up menu.
• Click the timeline, or move the playhead to where you want to add the event marker, and click the Add event button on the Events track.

Add an event to an event marker

Use one of the following methods:

• Double-click the event marker. The Events dialog will open to the action selection step.
• Right-click the event marker and select Add event to marker... from the pop-up menu. The Events dialog will open to the action selection step.
• In the Events panel, click the Add event button to open the Events dialog for a new event. For the target, select the parent of the animated element (usually the page), and for the event, select the event marker.

Edit an event at an event marker

Right-click the event marker and select the event you want to change from the list in the pop-up menu.

Remove an event marker

Right-click the event marker you want to remove and select Delete event marker from the pop-up menu. This action also deletes any events that were triggered by that event marker.

To delete a single event, use the Events panel.

Rename an event marker

1. Right-click the event marker you want to rename and select Edit event marker name... from the pop-up menu.
2. Enter the new name.
3. Press Enter.

Move an event marker

Drag the event marker to a new location on the timeline.

Event labels

Event labels are named locations on the timeline. If you want to use an event to send the playhead to a specific point on the timeline, you need to give that keyframe a label.

Add an event label to the Events track

Use one of the following methods:

• Click the timeline or otherwise move the playhead to where you want to add the label, then click the Add label button on the Events layer. Google Web Designer will assign a generic label name.
• To specify a label name:
  1. Right-click the Events track where you want to add the label and select Add label... from the pop-up menu.
  2. Enter a label name in the pop-up dialog.
  3. Press Enter.

Remove an event label

Right-click the label you want to remove and select Delete label from the pop-up menu. This action also deletes any events configured to use that event label.

Rename an event label

1. Right-click the label you want to rename and select Edit label... from the pop-up menu.
2. Enter the new name.
3. Press Enter.

Move an event label

Drag the event label to a new location on the timeline.

Actions

The following timeline actions can be triggered by other events:

Action	Configuration options
pause	none
play	none
togglePlay	none
gotoAndPlay	Label - The event label the animation should start from.
gotoAndPlayNTimes	Label - The event label the animation should start from. Repeat - The number of times the animation should loop.
gotoAndPause	Label - The event label the animation should start from.

Custom timeline actions that pause the animation (pause, togglePlay, and gotoAndPause) should use the following syntax:

gwd.actions.timeline.pause('<elementID>');