Skeleton for an amp-animation component (#5891)

ampproject · Oct 29, 2016 · c8d62c6 · c8d62c6
1 parent 09ff6c8
commit c8d62c6
Show file tree

Hide file tree

Showing 6 changed files with 139 additions and 0 deletions.
diff --git a/examples/animations.amp.html b/examples/animations.amp.html
@@ -0,0 +1,26 @@
+<!doctype html>
+<html ⚡>
+<head>
+  <meta charset="utf-8">
+  <title>Animations Examples</title>
+  <link rel="canonical" href="amps.html" >
+  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
+  <style amp-custom>
+  </style>
+  <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-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
+</head>
+<body>
+
+<amp-animation id="anim1" layout="nodisplay">
+<script type="application/json">
+{
+}
+</script>
+</amp-animation>
+
+<div>TODO</div>
+
+</body>
+</html>
diff --git a/extensions/amp-animation/0.1/amp-animation.js b/extensions/amp-animation/0.1/amp-animation.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {isExperimentOn} from '../../../src/experiments';
+import {user} from '../../../src/log';
+
+const TAG = 'amp-animation';
+
+
+export class AmpAnimation extends AMP.BaseElement {
+
+  /** @override */
+  buildCallback() {
+    user().assert(isExperimentOn(this.win, TAG),
+        `Experiment "${TAG}" is disabled.`);
+  }
+}
+
+AMP.registerElement(TAG, AmpAnimation);
diff --git a/extensions/amp-animation/0.1/test/test-amp-animation.js b/extensions/amp-animation/0.1/test/test-amp-animation.js
@@ -0,0 +1,33 @@
+/**
+ * Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {toggleExperiment} from '../../../../src/experiments';
+
+
+describes.sandboxed('AmpAnimation', {}, () => {
+
+  beforeEach(() => {
+    toggleExperiment(window, 'amp-animation', true);
+  });
+
+  afterEach(() => {
+    toggleExperiment(window, 'amp-animation', false);
+  });
+
+  it('should work', () => {
+    // TODO
+  });
+});
diff --git a/extensions/amp-animation/amp-animation.md b/extensions/amp-animation/amp-animation.md
@@ -0,0 +1,40 @@
+<!---
+Copyright 2016 The AMP HTML Authors. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS-IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+-->
+
+# <a name="amp-animation"></a> `amp-animation`
+
+<table>
+  <tr>
+    <td width="40%"><strong>Description</strong></td>
+    <td>Animation component</td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Availability</strong></td>
+    <td><div><a href="https://www.ampproject.org/docs/reference/experimental.html">Experimental</a>; no validations yet.</div><div>Work in progress.</div></td>
+  </tr>
+  <tr>
+    <td width="40%"><strong>Required Script</strong></td>
+    <td><code>&lt;script async custom-element="amp-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js">&lt;/script></code></td>
+  </tr>
+  <tr>
+    <td class="col-fourty"><strong><a href="https://www.ampproject.org/docs/guides/responsive/control_layout.html">Supported Layouts</a></strong></td>
+    <td>nodisplay</td>
+  </tr>
+</table>
+
+## Overview
+
+TODO
diff --git a/gulpfile.js b/gulpfile.js
@@ -54,6 +54,7 @@ declareExtension('amp-ad-network-doubleclick-impl', 0.1, false);
 declareExtension('amp-ad-network-fake-impl', 0.1, false);
 declareExtension('amp-analytics', '0.1', false);
 declareExtension('amp-anim', '0.1', false);
+declareExtension('amp-animation', '0.1', false);
 declareExtension('amp-apester-media', '0.1', true, 'NO_TYPE_CHECK');
 declareExtension('amp-app-banner', '0.1', true);
 declareExtension('amp-audio', '0.1', false);

diff --git a/tools/experiments/experiments.js b/tools/experiments/experiments.js
@@ -216,6 +216,13 @@ const EXPERIMENTS = [
     name: 'New breaking UX changes make to amp-sticky-ad',
     cleanupIssue: 'https://github.com/ampproject/amphtml/issues/5822',
   },
+  {
+    id: 'amp-animation',
+    name: 'High-performing keyframe animations in AMP.',
+    spec: 'https://github.com/ampproject/amphtml/blob/master/extensions/' +
+        'amp-animation/amp-animation.md',
+    cleanupIssue: 'https://github.com/ampproject/amphtml/issues/5888',
+  },
 ];
 
 if (getMode().localDev) {