New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Intent To Implement: amp-gwd-animation #9949

Closed
sklobovskaya opened this Issue Jun 15, 2017 · 4 comments

Comments

@sklobovskaya
Contributor

sklobovskaya commented Jun 15, 2017

Introduction

Google Web Designer (GWD) is an HTML5 authoring tool geared towards display advertising. 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.

As 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. GWD cannot leverage <amp-animation> because at this time GWD animations must be in CSS.

For this purpose, we’d like to create a <amp-gwd-animation> extension to use in GWD-generated documents that can encapsulate the GWD animation runtime functionality and interface with the GWD document model. GWD will automatically include the extension script tag and markup in documents that require it.

Implementation

play(), pause(), etc.

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. These functions will be exposed as AMP actions and will be triggered on user events configured in GWD.

Special logic for GWD timeline events

To make GWD’s custom timeline events work, the extension must manually listen for animationEnd events on certain animations in the document. 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.

disable/enablePlayback()

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.

Example usage

Example markup generated by GWD, using the animation extension to manipulate playback on GWD user events and trigger other actions on timeline events:

<!-- gotoAndPlay from the foo label when the button is tapped. -->
<button on="tap:gwdAnim.gotoAndPlay(id=someDiv, label=foo)"></button>

<!-- Pause all animations in page1 on some event. -->
<some-component on="some-event:gwdAnim.pause(id=page1)"></some-component>

<!-- Hide a div on an automatically-triggered timeline event. -->
<amp-gwd-animation id="gwdAnim" layout="nodisplay" on="timeline-event-1:someDiv.hide">
</amp-gwd-animation>
@jasti

This comment has been minimized.

Collaborator

jasti commented Jun 17, 2017

Awesome! Look forward to the PR.

@jasti jasti added this to the Prioritized FRs milestone Jun 17, 2017

@lannka lannka added this to Feature Backlog in AMP Advertising Sep 8, 2017

@lannka lannka moved this from Feature Backlog to Ads Features to track in AMP Advertising Sep 8, 2017

@ampprojectbot

This comment has been minimized.

Collaborator

ampprojectbot commented Dec 12, 2017

This issue hasn't been updated in awhile. @alanorozco Do you have any updates?

1 similar comment
@ampprojectbot

This comment has been minimized.

Collaborator

ampprojectbot commented Jun 5, 2018

This issue hasn't been updated in awhile. @alanorozco Do you have any updates?

@alanorozco

This comment has been minimized.

Member

alanorozco commented Jun 5, 2018

Implemented!

@alanorozco alanorozco closed this Jun 5, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment