The extension will expose methods like enablePlayback and disablePlayback to allow the AMP runtime to force animations to be temporarily turned off when the ad is scrolled out of view, etc. We'll attach listeners somewhere in the initialization step and broadcast custom events via the AMP action service to allow other GWD elements to subscribe to them. To make GWD’s custom timeline events work, the extension must manually listen for animationEnd events on certain animations in the document. These functions will be exposed as AMP actions and will be triggered on user events configured in GWD. The bulk of the component will be various GWD playback control methods like play(), pause(), and gotoAndPlay() which manipulate specific GWD animations by adding and removing CSS classes.

GWD will automatically include the extension script tag and markup in documents that require it. GWD cannot leverage because at this time GWD animations must be in CSS.įor this purpose, we’d like to create a extension to use in GWD-generated documents that can encapsulate the GWD animation runtime functionality and interface with the GWD document model. GWD provides tools for authoring CSS animations, and several custom GWD animation features, such as animation go-to points and controlling playback on events, rely on a custom JavaScript runtime.Īs part of GWD’s plan to add support for authoring AMP-compliant creatives, GWD needs some solution for including this runtime in the published HTML documents.

When your banner is complete, select the Tap Area component and click the ‘Bring to top’ button.Google Web Designer (GWD) is an HTML5 authoring tool geared towards display advertising.

(Optional) Create animations or add built-in or custom components to the page.

Import images by dragging them onto the stage, or drag them from the Asset Library panel.

To set up the collapsed ad in the banner page: See Create animations in Advanced mode in the Google Web Designer Help Center for more information.

Advanced: Animate individual elements on their own timeline.

See Create animations in Quick mode in the Google Web Designer Help Center for more information.

Quick: Animate your ad scene by scene.

Enter the path to the location, or click the search icon to navigate to the location you want.

Choose the Location on your computer in which the Google Web Designer files will be saved.

Set the dimensions for the collapsed and expanded sizes of the ad.

The ‘Create new blank file’ window displays.

Open Google Web Designer and click File > New file.

To create a new expandable with video creative in Google Web Designer: Make an expanding creative with Google Web Designer Select the page ID for the first page as the Target.

If an action doesn’t exist, you can create your own JavaScript functions and call them as custom actions. Open the Events panel and click the + button to add an event. The Events dialog is an interactive dialog that lets you choose a target object, the event that object can report, an action that event can send, and the element that receives the action. You connect objects (and the actions they register) to events in the Events dialog.

Or you could use a touch event in ad to trigger the start of an animation.

For example, you could use an event on the timeline to trigger a CSS change. This document compiles the top tips collected from years of helping users on the forum. If you have the export file for a preset, you can import it into your instance of Google Web Designer. Events are how you connect user gestures or timeline keyframes to an action in your ad or HTML document.

Google web designer button