Feedback: reduce animation to only wave

mozilla · Dec 3, 2024 · 7ddd168 · 7ddd168
1 parent 3b63895
commit 7ddd168
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 109 deletions.
diff --git a/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html b/bedrock/mozorg/templates/mozorg/home/includes/m24/hero.html
@@ -23,10 +23,6 @@ <h1 class="m24-c-flag-title">{{ ftl('m24-home-welcome-to-mozilla') }}</h1>
                 <feMorphology operator="dilate" radius="0.3" in="SourceGraphic" result="dilated" />
             </filter>
         </defs>
-        <g class="stationary">
-            <path shape-rendering="crispEdges" class="flag"
-                d="M39.55,181.45h-20.77V19.06h20.77v162.4ZM56.52,101.87h82.22v-4.68l-53.55-19.46v-16.39l53.55-19.46v-4.68h-63.5v-18.14h82.22v33.06l-43.6,15.07v4.68l43.6,15.07v33.06H56.52v-18.14ZM56.52,37.2h18.73v18.73h-18.73v-18.73Z" />
-        </g>
         <g class="wave">
             <path shape-rendering="crispEdges" class="pole" d="M39.55,181.45h-20.77V19.06h20.77v162.4ZM56.52" />
             <polygon shape-rendering="crispEdges" class="flag-five"
@@ -48,15 +44,6 @@ <h1 class="m24-c-flag-title">{{ ftl('m24-home-welcome-to-mozilla') }}</h1>
             <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" />
         </g>
-        <g class="blink-bounce">
-            <path class="pole-two" d="M39.55,181.45h-20.77v-107.29h20.77v107.29Z" />
-            <g class="head">
-                <rect class="pole-one" x="18.78" y="19.06" width="20.77" height="149.97" />
-                <rect class="eye" x="56.52" y="37.2" width="18.73" height="18.73" />
-                <polygon class="mouth"
-                    points="56.52 101.87 138.74 101.87 138.74 97.18 85.2 77.73 85.2 61.34 138.74 41.88 138.74 37.2 75.25 37.2 75.25 19.06 157.47 19.06 157.47 52.12 113.87 67.19 113.87 71.87 157.47 86.94 157.47 120.01 56.52 120.01 56.52 101.87" />
-            </g>
-        </g>
     </svg>
     </div>
   </section>

diff --git a/media/css/m24/flag.scss b/media/css/m24/flag.scss
@@ -28,9 +28,7 @@
 }
 
 .m24-c-flag-media {
-    --duration: 40s;
     --delay: 1s; // leave some space to read before introducing movement
-    --bounce-h: 12px;
     --wave-h: 8px;
 
     svg {
@@ -182,13 +180,7 @@ just not via explicit WAI-ARIA state management.
     .flag-two,
     .flag-three,
     .flag-four,
-    .flag-five,
-    .pole,
-    .stationary,
-    .wave,
-    .blink-bounce,
-    .blink-bounce .head,
-    .blink-bounce .eye {
+    .flag-five {
         animation-play-state: paused;
     }
 }
@@ -202,13 +194,7 @@ just not via explicit WAI-ARIA state management.
     .flag-two,
     .flag-three,
     .flag-four,
-    .flag-five,
-    .pole,
-    .stationary,
-    .wave,
-    .blink-bounce,
-    .blink-bounce .head,
-    .blink-bounce .eye {
+    .flag-five {
         animation-play-state: running;
     }
 }
@@ -236,9 +222,8 @@ just not via explicit WAI-ARIA state management.
 .flag-two,
 .flag-three,
 .flag-four,
-.flag-five,
-.pole {
-  animation: 1s linear infinite;
+.flag-five {
+  animation: 1s var(--delay) $bezier infinite;
   will-change: transform;
   filter: url("#dilate");
 }
@@ -250,34 +235,6 @@ just not via explicit WAI-ARIA state management.
 .flag-four { animation-name: flag-four; }
 .flag-five { animation-name: flag-five; }
 
-/* Shared Animation Properties */
-.stationary,
-.wave,
-.blink-bounce {
-  animation: var(--duration) var(--delay) linear infinite;
-  will-change: opacity;
-}
-
-.wave,
-.blink-bounce {
-  opacity: 0;
-}
-
-/* Animation Names */
-.stationary { animation-name: switch-stationary; }
-.wave { animation-name: switch-animation-wave; }
-.blink-bounce { animation-name: switch-animation-blink-bounce; }
-
-/* Head & Eye Animations */
-.blink-bounce .head {
-  animation: bounce 10s linear infinite;
-  will-change: transform;
-}
-
-.blink-bounce .eye {
-  animation: blink-cycle var(--duration) var(--delay) cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
-  will-change: fill;
-}
 
 /* Flag Movement Keyframes */
 @keyframes flag-one {
@@ -324,52 +281,3 @@ just not via explicit WAI-ARIA state management.
     animation-timing-function: ease-out;
   }
 }
-
-/* Bounce Animation */
-@keyframes bounce {
-  0%, 76% { transform: translate3d(0, 0, 0); }
-  80% { transform: translate3d(0, var(--bounce-h), 0); }
-  84% { transform: translate3d(0, 0, 0); }
-  88% { transform: translate3d(0, var(--bounce-h), 0); }
-  92% { transform: translate3d(0, 0, 0); }
-  96% { transform: translate3d(0, var(--bounce-h), 0); }
-  100% { transform: translate3d(0, 0, 0); }
-}
-
-/* Blink Animation */
-@keyframes blink-cycle {
-  0%, 49.9% { opacity: 1; }
-
-  /* First blink */
-  57.4% { opacity: 1; }
-  57.5% { opacity: 0; }
-  57.6% { opacity: 1; }
-
-  /* Pause */
-  57.61%, 58.2% { opacity: 1; }
-
-  /* Second blink */
-  58.25% { opacity: 1; }
-  58.35% { opacity: 0; }
-  58.45% { opacity: 1; }
-
-  /* Finish */
-  58.46%, 74.9%, 75%, 100% { opacity: 1; }
-}
-
-/* Opacity Transitions */
-@keyframes switch-animation-wave {
-  0%, 49.9% { opacity: 1; }
-  50%, 100% { opacity: 0; }
-}
-
-@keyframes switch-animation-blink-bounce {
-  0%, 49.9% { opacity: 0; }
-  50%, 74.9% { opacity: 1; }
-  75%, 100% { opacity: 0; }
-}
-
-@keyframes switch-stationary {
-  0%, 74.9% { opacity: 0; }
-  75%, 100% { opacity: 1; }
-}