📖 Add interactive results animation to examples (#30010)

* Testing animation stuff * Added animations to the results demos * Reverted abstract and results * Work in safari * Set default results animation to scale-fade-up * Removed forced animation
ampproject · Sep 10, 2020 · 7e9d5ab · 7e9d5ab
1 parent cc14c96
commit 7e9d5ab
Show file tree

Hide file tree

Showing 3 changed files with 72 additions and 6 deletions.
diff --git a/examples/amp-story/interactive_quizzes.html b/examples/amp-story/interactive_quizzes.html
@@ -510,12 +510,40 @@ <h1 id="cover-title">NAME THAT ARTIST</h1>
               style="--interactive-accent-color: #F34E4E"
               prompt-text="You are"
               option-1-results-category="Art Expert" option-1-text="You got it all! Your knowledge in art is impeccable, be proud of it" option-1-image="https://images.unsplash.com/photo-1441471349424-351990746ff4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-1-results-threshold="100" option-1-confetti="🎨"
+              option-2-results-category="Art Enthusiast" option-2-text="Keep going! Learning about art is fun and interesting" option-2-image="https://images.unsplash.com/photo-1500628550463-c8881a54d4d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-2-results-threshold="75" option-2-confetti="🎨"
+              option-3-results-category="Art Beginner" option-3-text="Don't feel bad! You're on the right track, keep learning and you will ace this" option-3-image="https://images.unsplash.com/photo-1482245294234-b3f2f8d5f1a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-3-results-threshold="50" option-3-confetti="🎨"
+              option-4-results-category="Art Ignorant" option-4-text="Not everyone was born for this, go find something else you like. Or start learning, your choice" option-4-image="https://images.unsplash.com/photo-1471666875520-c75081f42081?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-4-results-threshold="0" option-4-confetti="🎨">
+          </amp-story-interactive-results>
+          </div>
+        </amp-story-grid-layer>
+      </amp-story-page>
+      <amp-story-page id="quiz-results-2">
+        <amp-story-grid-layer template="fill">
+          <amp-img style="filter:blur(4px)"
+            src="https://images.unsplash.com/photo-1515405295579-ba7b45403062?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1700&q=80"
+            layout="fixed"
+            height="1600"
+            width="900">
+          </amp-img>
+        </amp-story-grid-layer>
+        <amp-story-grid-layer template="fill">
+          <div class="quiz-content space-center">
+            <amp-story-interactive-results
+              animate-in="fly-in-bottom"
+              style="--interactive-accent-color: #A34EFE"
+              prompt-text="You are"
+              option-1-results-category="Art Expert" option-1-text="You got it all! Your knowledge in art is impeccable, be proud of it" option-1-image="https://images.unsplash.com/photo-1441471349424-351990746ff4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
               option-1-results-threshold="100"
               option-2-results-category="Art Enthusiast" option-2-text="Keep going! Learning about art is fun and interesting" option-2-image="https://images.unsplash.com/photo-1500628550463-c8881a54d4d4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
               option-2-results-threshold="75"
               option-3-results-category="Art Beginner" option-3-text="Don't feel bad! You're on the right track, keep learning and you will ace this" option-3-image="https://images.unsplash.com/photo-1482245294234-b3f2f8d5f1a4?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
               option-3-results-threshold="50"
-              option-4-results-category="Art Ignorant" option-4-text="Not everyone was born for this, go find something else you like. Or start learning, your choice" option-4-image="https://images.unsplash.com/photo-1471666875520-c75081f42081?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80">
+              option-4-results-category="Art Ignorant" option-4-text="Not everyone was born for this, go find something else you like. Or start learning, your choice" option-4-image="https://images.unsplash.com/photo-1471666875520-c75081f42081?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=200&q=80"
+              option-4-results-threshold="0">
           </amp-story-interactive-results>
           </div>
         </amp-story-grid-layer>

diff --git a/examples/amp-story/interactive_results.html b/examples/amp-story/interactive_results.html
@@ -8,15 +8,22 @@
     <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-animation" src="https://cdn.ampproject.org/v0/amp-animation-0.1.js"></script>
+    <script async custom-element="amp-animation-polyfill" src="https://cdn.ampproject.org/v0/amp-animation-polyfill-0.1.js"></script>
+    <script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
     <script async custom-element="amp-story-interactive" src="https://cdn.ampproject.org/v0/amp-story-interactive-0.1.js"></script>
     <style amp-custom>
     body {
       font-family: 'Poppins', sans-serif;
     }
 
-    amp-story-interactive-poll, amp-story-interactive-results {
+    .center {
       align-self: center;
+      display: inline;
       justify-self: center;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
     }
 
     amp-story-interactive-results[chip-style="transparent"] {
@@ -76,14 +83,17 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #F34E4E"
+                animate-in="fade-in"
                 prompt-text="You are a"
                 option-1-results-category="Cat"
                 option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
                 option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
                 option-2-results-category="Dog">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
         <amp-story-page id="quiz-results-dark">
@@ -96,15 +106,18 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #F34E4E;"
+                animate-in="drop"
                 theme="dark"
                 prompt-text="You are a"
                 option-1-results-category="Cat"
                 option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
                 option-1-results-threshold="0"
                 option-2-results-category="Dog" option-2-results-threshold="100">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
 
@@ -118,14 +131,17 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #F34E4E"
+                animate-in="fly-in-bottom"
                 prompt-text="You are a"
                 option-1-results-category="Cat"
                 option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
                 option-1-results-threshold="0"
                 option-2-results-category="Dog" option-2-results-threshold="100">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
         <amp-story-page id="quiz-results-no-image-score" style="background-color:black">
@@ -138,13 +154,16 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #FFAABB"
+                animate-in="rotate-in-left"
                 prompt-text="You are a"
                 option-1-results-category="Cat"
                 option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
                 option-2-results-category="Dog">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
 
@@ -158,15 +177,18 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #531E2E"
+                animate-in="fly-in-top"
                 chip-style="transparent"
                 prompt-text="You are a"
                 option-1-results-category="Cat"
                 option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
                 option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
                 option-2-results-category="Dog">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
         <amp-story-page id="quiz-results-dark-transparent" style="background-color:black">
@@ -179,8 +201,10 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #FFAABB"
+                animate-in="twirl-in"
                 chip-style="transparent"
                 theme="dark"
                 prompt-text="You are a"
@@ -190,6 +214,7 @@ <h1>Do you want to see results?</h1>
                 option-1-results-threshold="0"
                 option-2-results-category="Dog" option-2-results-threshold="100">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
         <amp-story-page id="quiz-results-transparent-no-image" style="background-color:black">
@@ -202,8 +227,10 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #F34E4E; --interactive-prompt-background: #ffffff33"
+                animate-in="pulse"
                 prompt-text="You are a"
                 theme="dark"
                 chip-style="transparent"
@@ -212,6 +239,7 @@ <h1>Do you want to see results?</h1>
                 option-1-results-threshold="0"
                 option-2-results-category="Dog" option-2-results-threshold="100">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
         <amp-story-page id="quiz-results-transparent-no-image-dark" style="background-color:white">
@@ -224,6 +252,7 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #F34E4E"
                 prompt-text="You are a"
@@ -233,6 +262,7 @@ <h1>Do you want to see results?</h1>
                 option-1-results-threshold="0"
                 option-2-results-category="Dog" option-2-results-threshold="100">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
 
@@ -246,14 +276,17 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #F34E4E; --interactive-prompt-background:transparent"
+                animate-in="scale-fade-down"
                 prompt-text="You are a"
                 option-1-results-category="Cat"
                 option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
                 option-1-results-threshold="0"
                 option-2-results-category="Dog" option-2-results-threshold="100">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
 
@@ -267,15 +300,18 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #F34E4E"
+                animate-in="whoosh-in-right"
                 prompt-text="You are a"
                 option-1-results-category="Cat"
                 option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
                 option-1-image="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg"
                 option-1-results-threshold="0"
                 option-2-results-category="Dog" option-2-results-threshold="100">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
 
@@ -289,14 +325,17 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
                 style="--interactive-accent-color: #F34E4E; --interactive-prompt-background:linear-gradient(orange, red);--interactive-prompt-text-color:black"
+                animate-in="fly-in-right"
                 prompt-text="You are a"
                 option-1-results-category="Cat"
                 option-1-text="Everyone loves cats, and so do you! Cats are the best companion to WFH"
                 option-1-results-threshold="0"
                 option-2-results-category="Dog" option-2-results-threshold="100">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
 
@@ -310,7 +349,9 @@ <h1>Do you want to see results?</h1>
             </amp-img>
           </amp-story-grid-layer>
           <amp-story-grid-layer>
+            <div class="center">
             <amp-story-interactive-results
+                animate-in="rotate-in-right"
                 prompt-text="You are a"
                 class="sharp"
                 chip-style="transparent"
@@ -320,6 +361,7 @@ <h1>Do you want to see results?</h1>
                 option-1-results-threshold="0"
                 option-2-results-category="Dog" option-2-results-threshold="100">
             </amp-story-interactive-results>
+            </div>
           </amp-story-grid-layer>
         </amp-story-page>
     </amp-story>

diff --git a/extensions/amp-story/1.0/amp-story.css b/extensions/amp-story/1.0/amp-story.css
@@ -968,10 +968,6 @@ amp-story-interactive-results[chip-style="transparent"] {
   --i-amphtml-interactive-options-chip-background-color: transparent !important;
   --interactive-prompt-background: transparent;
   --i-amphtml-interactive-component-shadow: none !important;
-}
-
-amp-story-interactive-results[chip-style="transparent"] {
-  --interactive-prompt-background: transparent;
   --interactive-prompt-text-color: black;
   --i-amphtml-interactive-results-prompt-margin: 0px !important;
 }