Initial animation testing

mozilla · Nov 20, 2024 · 79af51e · 79af51e
1 parent 02db980
commit 79af51e
Show file tree

Hide file tree

Showing 6 changed files with 162 additions and 5 deletions.
diff --git a/bedrock/mozorg/templates/mozorg/home/home-m24.html b/bedrock/mozorg/templates/mozorg/home/home-m24.html
@@ -53,3 +53,7 @@
     {% include 'includes/protocol/footer/footer.html' %}
   {% endwith %}
 {% endblock %}
+
+{% block js %}
+  {{ js_bundle('m24-animation') }}
+{% endblock %}
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html
@@ -5,9 +5,32 @@
 #}
 
 <div class="m24-t-light-alt m24-t-dark m24-t-transition-next">
-  <section class="m24-c-flag">
+  <section class="m24-c-flag" data-animation-running="false">
+    <!-- The pause/play text needs translation -->
+    <!-- when text changes on click, we need to announce the change -->
+    <button class="c-animation-button" aria-live="polite">
+      <span class="c-animation-button-pause">Pause</span>
+      <span class="c-animation-button-play">Play</span>
+    </button>
     <div class="m24-c-flag-media">
-      <img src="{{ static('img/home/2024/hero-symbol-white.svg') }}" alt="" width="216" height="243">
+      <!-- with thanks to Elise: https://codepen.io/oleaceae/pen/GRVzVdE?editors=1100 -->
+      <?xml version="1.0" encoding="UTF-8"?>
+      <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" width="176.26" height="200.19" viewBox="0 0 176.26 200.19">
+        <path shape-rendering="crispEdges"  class="pole" d="M39.55,181.45h-20.77V19.06h20.77v162.4ZM56.52" />
+        <polygon shape-rendering="crispEdges"  class="flag-five" points="126.03 37.2 138.74 37.2 138.74 41.88 126.03 46.5 126.03 62.99 157.47 52.12 157.47 19.06 126.03 19.06 126.03 37.2" />
+        <polygon shape-rendering="crispEdges"  class="flag-five" points="126.03 101.87 126.03 120.01 157.47 120.01 157.47 86.94 126.03 76.08 126.03 92.56 138.74 97.18 138.74 101.87 126.03 101.87" />
+        <polygon shape-rendering="crispEdges"  class="flag-four" points="113.88 88.15 126.02 92.56 126.02 76.07 113.88 71.87 113.88 88.15" />
+        <rect shape-rendering="crispEdges"  class="flag-four" x="113.88" y="101.87" width="12.15" height="18.14" />
+        <rect shape-rendering="crispEdges"  class="flag-four" x="113.88" y="19.06" width="12.15" height="18.14" />
+        <polygon shape-rendering="crispEdges"  class="flag-four" points="113.88 50.92 113.88 67.19 126.02 62.99 126.02 46.5 113.88 50.92" />
+        <polygon shape-rendering="crispEdges"  class="flag-three" points="113.88 67.19 113.88 50.92 85.2 61.34 85.2 77.73 113.88 88.15 113.88 71.87 113.87 71.87 113.87 67.19 113.88 67.19" />
+        <rect shape-rendering="crispEdges"  class="flag-three" x="85.19" y="101.87" width="28.68" height="18.14" />
+        <rect shape-rendering="crispEdges" class="flag-three" x="85.19" y="19.06" width="28.68" height="18.14" />
+        <rect shape-rendering="crispEdges" class="flag-two" x="75.16" y="101.87" width="10.02" height="18.14" />
+        <rect shape-rendering="crispEdges" class="flag-two" x="75.25" y="19.06" width="9.93" height="18.14" />
+        <rect shape-rendering="crispEdges" class="flag-one" x="56.52" y="101.87" width="18.63" height="18.14" />
+        <rect shape-rendering="crispEdges" class="flag-one" x="56.52" y="37.2" width="18.73" height="18.73" />
+      </svg>
     </div>
     <div class="m24-c-flag-text">
       <h1 class="m24-c-flag-title">Welcome to Mozilla</h1>

diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss
@@ -27,8 +27,10 @@
     display: block;
     margin-bottom: 16px;
 
-    img {
+    svg {
         width: 100px;
+        height: auto;
+        fill: $m24-color-black; // inverts to black in dark theme section
     }
 }
 
@@ -50,7 +52,7 @@
         grid-column: 1/3;
         margin-bottom: 0;
 
-        img {
+        svg {
             width: 100%;
             max-width: 216px;
         }
@@ -89,3 +91,90 @@
 .m24-c-products {
     background-color: $m24-color-white;
 }
+
+// Animation
+.no-js .c-animation-button {
+    display: none;
+}
+
+// Accessibility check:
+// Does the approach of changing label display + aria live region work
+
+/*
+Note from Inclusive Components, "Changing labels": https://inclusive-components.design/toggle-button/
+As a rule of thumb, you should never change pressed state and label together.
+If the label changes, the button has already changed state in a sense,
+just not via explicit WAI-ARIA state management.
+*/
+[data-animation-running="false"] {
+    .c-animation-button-pause {
+        display: none;
+    }
+
+    .flag-one, .flag-two, .flag-three, .flag-four, .flag-five {
+        animation-play-state: paused;
+    }
+}
+
+[data-animation-running="true"] {
+    .c-animation-button-play {
+        display: none;
+    }
+
+    .flag-one, .flag-two, .flag-three, .flag-four, .flag-five {
+        animation-play-state: running;
+    }
+}
+
+// with thanks to Elise: https://codepen.io/oleaceae/pen/GRVzVdE?editors=1100
+.flag-one, .flag-two, .flag-three, .flag-four, .flag-five {
+    animation-duration: 1.5s;
+    animation-fill-mode: forwards;
+    animation-timing-function: steps(1); // jump between transforms, no interpolation
+    animation-delay: 0.5s;
+    animation-iteration-count: infinite;
+    transition: none;
+}
+
+.flag-one { animation-name: flag-one }
+@keyframes flag-one {
+  0% { transform: translateY(0);}
+  16% { transform: translateY(0.5rem);}
+  41% { transform: translateY(0);}
+  66% { transform: translateY(-0.5rem);}
+  92% { transform: translateY(0); }
+}
+
+.flag-two { animation-name: flag-two }
+@keyframes flag-two {
+  0% { transform: translate(0,0); }
+  25% { transform: translate(0,.5rem); }
+  50% { transform: translate(0,0); }
+  75% { transform: translate(0,-.5rem); }
+  100% { transform: translate(0,0); }
+}
+
+.flag-three { animation-name: flag-three }
+@keyframes flag-three {
+  0% { transform: translate(0,-.5rem); }
+  8% { transform: translate(0,0); }
+  33% { transform: translate(0,.5rem); }
+  58% { transform: translate(0,0); }
+  83% { transform: translate(0,-.5rem); }
+}
+
+.flag-four { animation-name: flag-four }
+@keyframes flag-four {
+  0% { transform: translate(0,-.5rem); }
+  16% { transform: translate(0,0); }
+  50% { transform: translate(0,.5rem); }
+  66% { transform: translate(0,0); }
+}
+
+.flag-five { animation-name: flag-five}
+@keyframes flag-five {
+  0% { transform: translate(0,-.5rem); }
+  25% { transform: translate(0,0); }
+  50% { transform: translate(0,.5rem); }
+  75% { transform: translate(0,0); }
+}
diff --git a/media/img/home/2024/hero-symbol-white.svg b/media/img/home/2024/hero-symbol-white.svg
diff --git a/media/js/m24/animation-play-state.es6.js b/media/js/m24/animation-play-state.es6.js
@@ -0,0 +1,36 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at https://mozilla.org/MPL/2.0/.
+ */
+
+const ANIMATION_RUNNING = 'data-animation-running';
+
+function togglePlayState(e) {
+    const animationContainer = e.target.closest(`[${ANIMATION_RUNNING}]`);
+    if (animationContainer.getAttribute(ANIMATION_RUNNING) === 'true') {
+        animationContainer.setAttribute(ANIMATION_RUNNING, 'false');
+    } else {
+        animationContainer.setAttribute(ANIMATION_RUNNING, 'true');
+    }
+}
+
+function init() {
+    // play animations if motion is allowed
+    if (window.Mozilla.Utils.allowsMotion()) {
+        const animationContainers = document.querySelectorAll(
+            `[${ANIMATION_RUNNING}]`
+        );
+        animationContainers.forEach((container) =>
+            container.setAttribute(ANIMATION_RUNNING, 'true')
+        );
+    }
+
+    // play or pause animations on button click
+    const playStateButtons = document.querySelectorAll('.c-animation-button');
+    playStateButtons.forEach((button) =>
+        button.addEventListener('click', (e) => togglePlayState(e))
+    );
+}
+
+init();
diff --git a/media/static-bundles.json b/media/static-bundles.json
@@ -1795,6 +1795,12 @@
       ],
       "name": "monitor-banner"
     },
+    {
+      "files": [
+        "js/m24/animation-play-state.es6.js"
+      ],
+      "name": "m24-animation"
+    },
     {
       "files": [
         "js/mozorg/rise25/rise25.js"