✨ [Story bodymoving] Support amp-bodymovin-animation on amp-story-grid-layer

examples/amp-story/amp-story-animation.html

@@ -4,27 +4,13 @@
     <meta charset="utf-8" />
     <title>amp-animation inside amp-story</title>
     <link rel="canonical" href="." />
-    <meta
-      name="viewport"
-      content="width=device-width,minimum-scale=1,initial-scale=1"
-    />
+    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
     <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
     <script async src="https://cdn.ampproject.org/v0.js"></script>
-    <script
-      async
-      custom-element="amp-story"
-      src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
-    ></script>
-    <script
-      async
-      custom-element="amp-video"
-      src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
-    ></script>
-    <script
-      async
-      custom-element="amp-animation"
-      src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"
-    ></script>
+    <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
+    <script async custom-element="amp-video" src="https://cdn.ampproject.org/v0/amp-video-0.1.js"></script>
+    <script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
+    <script async custom-element="amp-bodymovin-animation" src="https://cdn.ampproject.org/v0/amp-bodymovin-animation-0.1.js"></script>
     <style amp-custom>
       body {
         font-family: sans-serif;
@@ -160,6 +146,12 @@
           </div>
         </amp-story-grid-layer>
       </amp-story-page>
+      <amp-story-page id="bodymovin">
+        <amp-story-grid-layer template="vertical">
+          <amp-bodymovin-animation layout="responsive" width="200" height="200" src="https://nainar.github.io/loader.json" loop>
+          </amp-bodymovin-animation>
+        </amp-story-grid-layer>
+      </amp-story-page>
     </amp-story>
   </body>
 </html>

extensions/amp-story/1.0/amp-story.css

@@ -728,3 +728,7 @@ amp-story .amp-video-eq,
 .i-amphtml-story-page-play-icon {
   background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 48 48" fill="#FFF"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 4a20 20 0 1 0 0 40 20 20 0 0 0 0-40zm-4 29V15l12 9-12 9z"/></svg>') !important;
 }
+
+amp-bodymovin-animation, amp-bodymovin-animation * {
+  pointer-events: none !important;
+}

extensions/amp-story/1.0/animation.js

@@ -59,7 +59,7 @@ const DEFAULT_EASING = 'cubic-bezier(0.4, 0.0, 0.2, 1)';
  * TODO(alanorozco): maybe memoize?
  */
 export function hasAnimations(element) {
-  const selector = `${ANIMATABLE_ELEMENTS_SELECTOR},>amp-story-animation`;
+  const selector = `${ANIMATABLE_ELEMENTS_SELECTOR},>amp-story-animation,amp-bodymovin-animation`;
   return !!scopedQuerySelector(element, selector);
 }
 
@@ -700,6 +700,12 @@ export class AnimationManager {
               })
           )
         )
+        .concat(
+          Array.prototype.map.call(
+            this.page_.querySelectorAll('amp-bodymovin-animation'),
+            (el) => new BodymovinAnimationRunner(el)
+          )
+        )
         .filter(Boolean);
     }
     return devAssert(this.runners_);
@@ -881,3 +887,77 @@ export class AnimationSequence {
     return this.subscriptionPromises_[id];
   }
 }
+
+export class BodymovinAnimationRunner {
+  /**
+   * @param {!Element} bodymovinAnimationEl
+   */
+  constructor(bodymovinAnimationEl) {
+    this.bodymovinAnimationEl_ = bodymovinAnimationEl;
+    this.pause();
+  }
+
+  /**
+   * Pauses the bodymovin animation.
+   */
+  pause() {
+    this.executeAction_({method: 'pause', satisfiesTrust: () => true});
+  }
+
+  /**
+   * Plays the bodymovin animation.
+   */
+  resume() {
+    this.executeAction_({method: 'play', satisfiesTrust: () => true});
+  }
+
+  /**
+   * Starts the bodymovin animation.
+   */
+  start() {
+    this.resume();
+  }
+
+  /**
+   * Seeks the bodymovin animation to the first frame.
+   */
+  applyFirstFrame() {
+    this.executeAction_({
+      method: 'seekTo',
+      satisfiesTrust: () => true,
+      args: {
+        percent: 0,
+      },
+    });
+  }
+
+  /**
+   * Seeks the bodymovin animation to the last frame.
+   */
+  applyLastFrame() {
+    this.executeAction_({
+      method: 'seekTo',
+      satisfiesTrust: () => true,
+      args: {
+        percent: 1,
+      },
+    });
+  }
+
+  /**
+   * Cancels the bodymovin animation by pausing it.
+   */
+  cancel() {
+    this.pause();
+  }
+
+  /**
+   * @param {!any} action
+   * @private
+   */
+  executeAction_(action) {
+    this.bodymovinAnimationEl_.getImpl().then((impl) => {
+      impl.executeAction(action);
+    });
+  }
+}

extensions/amp-story/validator-amp-story.protoascii

@@ -711,6 +711,7 @@ descendant_tag_list: {
   tag: "ADDRESS"
   tag: "AMP-ANALYTICS"
   tag: "AMP-AUDIO"
+  tag: "AMP-BODYMOVIN-ANIMATION"
   tag: "AMP-DATE-COUNTDOWN"
   tag: "AMP-DATE-DISPLAY"
   tag: "AMP-EXPERIMENT"