[amp-story] Allow more parameters for pan/zoom animations ✨ (ampproje…

…ct#20778)

* allow more parameters in for pan/zoom animations.

* change attribute names

* types

* fix test

* assert values for params, change attribute naming.

* change attribute names do scale-start, scale-end.

* hoist defaults to constants

examples/amp-story/animations-presets.html

@@ -178,7 +178,7 @@ <h1>zoom-in</h1>
     <!-- ## Zoom-Out -->
     <amp-story-page id="zoom-out">
       <amp-story-grid-layer template="fill">
-        <amp-img animate-in="zoom-out" animate-in-duration="4s" layout="responsive" src="https://picsum.photos/720/320?image=1026"
+        <amp-img animate-in="zoom-out" scale-start="3" scale-end="1" animate-in-duration="4s" layout="responsive" src="https://picsum.photos/720/320?image=1026"
           width="720" height="320">
         </amp-img>
       </amp-story-grid-layer>
@@ -190,7 +190,7 @@ <h1>zoom-out</h1>
     <!-- ## Pan-Left -->
     <amp-story-page id="pan-left">
       <amp-story-grid-layer template="fill">
-        <amp-img animate-in="pan-left" id="img-pan-left" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026"
+        <amp-img animate-in="pan-left" id="img-pan-left" translate-x="600px" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026"
           width="720" height="320">
         </amp-img>
       </amp-story-grid-layer>
@@ -202,7 +202,7 @@ <h1>pan-left</h1>
     <!-- ## Pan-Right -->
     <amp-story-page id="pan-right">
       <amp-story-grid-layer template="fill">
-        <amp-img animate-in="pan-right" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
+        <amp-img animate-in="pan-right" animate-in-duration="4s" translate-x="200px" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
           height="320">
         </amp-img>
       </amp-story-grid-layer>
@@ -214,7 +214,7 @@ <h1>pan-right</h1>
     <!-- ## Pan-Up -->
     <amp-story-page id="pan-up">
       <amp-story-grid-layer template="fill">
-        <amp-img animate-in="pan-up" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
+        <amp-img animate-in="pan-up" animate-in-duration="4s" translate-y="100px" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
           height="320">
         </amp-img>
       </amp-story-grid-layer>
@@ -226,7 +226,7 @@ <h1>pan-up</h1>
     <!-- ## Pan-Down -->
     <amp-story-page id="pan-down">
       <amp-story-grid-layer template="fill">
-        <amp-img animate-in="pan-down" animate-in-duration="4s" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
+        <amp-img animate-in="pan-down" animate-in-duration="4s" translate-y="100px" layout="fixed" src="https://picsum.photos/720/320?image=1026" width="720"
           height="320">
         </amp-img>
       </amp-story-grid-layer>

examples/amp-story/visual-effects.html

@@ -6,7 +6,7 @@
   <link rel="canonical" href="visual-effects.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <script async src="https://cdn.ampproject.org/v0.js"></script>
-  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-0.1.js"></script>
+  <script async custom-element="amp-story" src="https://cdn.ampproject.org/v0/amp-story-1.0.js"></script>
   <style amp-custom>
     amp-story-page {
       font-family: 'Roboto', sans-serif;
@@ -33,7 +33,7 @@
 
     <amp-story-page id="ken-burns-effect1">
       <amp-story-grid-layer template="fill">
-        <div animate-in="zoom-in" animate-in-duration="30s" class="img-container">
+        <div animate-in="zoom-in" animate-in-duration="30s" scale-start="1" scale-end="3" class="img-container">
           <amp-img id="ken-burns-img1" src="https://picsum.photos/1600/1200?image=1077" animate-in="pan-left" animate-in-duration="30s"
             layout="fixed" width="1600" height="1200">
           </amp-img>