fix(mandala): remove rotation and color animation (#9916)

The Mandala animations had two problems: 1. The rotation used a significant amount of CPU and GPU. 2. The color animation on the MDN Plus page distracted from the content.
mdn · Oct 31, 2023 · e687a03 · e687a03
1 parent b60d0c0
commit e687a03
Show file tree

Hide file tree

Showing 7 changed files with 13 additions and 192 deletions.
diff --git a/client/src/homepage/homepage-hero/index.tsx b/client/src/homepage/homepage-hero/index.tsx
@@ -16,7 +16,7 @@ export function HomepageHero() {
         </p>
         <Search id="hp-search" isHomepageSearch={true} />
       </section>
-      <Mandala rotate={true} extraClasses="homepage-hero-bg" />
+      <Mandala extraClasses="homepage-hero-bg" />
     </div>
   );
 }
diff --git a/client/src/plus/ai-help/index.tsx b/client/src/plus/ai-help/index.tsx
@@ -74,7 +74,7 @@ export default function AiHelp() {
         <Container>
           <h1>
             <div className="mandala-icon-wrapper">
-              <Mandala rotate={true} />
+              <Mandala />
               <Icon name="chatgpt" />
             </div>
             <span>AI Help</span>

diff --git a/client/src/plus/collections/index.tsx b/client/src/plus/collections/index.tsx
@@ -67,7 +67,7 @@ function Overview() {
         <Container>
           <h1>
             <div className="mandala-icon-wrapper">
-              <Mandala rotate={true} />
+              <Mandala />
               <Icon name="bookmark-filled" />
             </div>
             <span>Collections</span>

diff --git a/client/src/plus/offer-overview/offer-hero/index.tsx b/client/src/plus/offer-overview/offer-hero/index.tsx
@@ -1,9 +1,7 @@
-import { DEV_MODE } from "../../../env";
 import Mandala from "../../../ui/molecules/mandala";
 import "./index.scss";
 
 function OfferHero() {
-  const animate = !DEV_MODE;
   return (
     <div className="dark offer-hero">
       <header className="container offer-hero-header">
@@ -27,7 +25,7 @@ function OfferHero() {
         </div>
       </header>
       <div className="mandala-wrapper">
-        <Mandala animate={animate} animateColors={animate} />
+        <Mandala />
       </div>
     </div>
   );

diff --git a/client/src/plus/updates/index.tsx b/client/src/plus/updates/index.tsx
@@ -168,7 +168,7 @@ function UpdatesLayout() {
         <Container>
           <h1>
             <div className="mandala-icon-wrapper">
-              <Mandala rotate={true} />
+              <Mandala />
               <Icon name="bell-filled" />
             </div>
             <span>Updates</span>

diff --git a/client/src/ui/molecules/mandala/index.scss b/client/src/ui/molecules/mandala/index.scss
@@ -11,10 +11,6 @@
   display: flex;
   justify-content: center;
 
-  .mandala-rotate > .mandala-svg-container {
-    animation: rotation 500s linear infinite;
-  }
-
   svg {
     font-size: 1.5rem;
     font-weight: 300;
@@ -44,99 +40,4 @@
   textPath[href="#circle5"] {
     font-size: 1rem;
   }
-
-  &.animate-colors {
-    svg > text > textPath > tspan {
-      animation: mandala-color-change 50s infinite;
-      animation-timing-function: ease-in-out;
-      fill: var(--mandala-primary);
-    }
-
-    textPath[href="#circle1"] > tspan {
-      animation-delay: -15s;
-      fill: var(--mandala-accent-1);
-    }
-
-    textPath[href="#circle2"] > tspan {
-      animation-delay: -20s;
-      fill: var(--mandala-accent-2);
-    }
-
-    textPath[href="#circle3"] > tspan {
-      animation-delay: -30s;
-      fill: var(--mandala-accent-3);
-    }
-
-    textPath[href="#circle5"] > tspan {
-      animation-delay: -40s;
-      fill: var(--mandala-accent-4);
-    }
-  }
-
-  @keyframes rotation {
-    from {
-      transform: rotate(0deg);
-    }
-
-    to {
-      transform: rotate(360deg);
-    }
-  }
-  @keyframes mandala-color-change {
-    0% {
-      fill: var(--mandala-primary);
-    }
-
-    10% {
-      fill: var(--mandala-primary);
-    }
-
-    15% {
-      fill: var(--mandala-accent-1);
-    }
-
-    20% {
-      fill: var(--mandala-primary);
-    }
-
-    25% {
-      fill: var(--mandala-primary);
-    }
-
-    30% {
-      fill: var(--mandala-accent-2);
-    }
-
-    35% {
-      fill: var(--mandala-primary);
-    }
-
-    40% {
-      fill: var(--mandala-primary);
-    }
-
-    50% {
-      fill: var(--mandala-accent-3);
-    }
-
-    55% {
-      fill: var(--mandala-primary);
-    }
-
-    60% {
-      fill: var(--mandala-primary);
-    }
-
-    65% {
-      fill: var(--mandala-accent-4);
-    }
-
-    70% {
-      fill: var(--mandala-primary);
-    }
-
-    100% {
-      fill: var(--mandala-primary);
-    }
-  }
 }
diff --git a/client/src/ui/molecules/mandala/index.tsx b/client/src/ui/molecules/mandala/index.tsx
@@ -1,28 +1,12 @@
 import "./index.scss";
 
-function Mandala({
-  animate = false,
-  animateColors = false,
-  rotate = false,
-  extraClasses = null,
-}: {
-  animate?: boolean;
-  animateColors?: boolean;
-  rotate?: boolean;
-  extraClasses?: string | null;
-}) {
+function Mandala({ extraClasses = null }: { extraClasses?: string | null }) {
   return (
     <div
-      className={`mandala-container ${animateColors ? "animate-colors" : ""} ${
-        extraClasses || ""
-      }`}
+      className={`mandala-container ${extraClasses || ""}`}
       aria-hidden="true"
     >
-      <div
-        className={`mandala-translate ${
-          rotate && !animate ? "mandala-rotate" : ""
-        }`}
-      >
+      <div className="mandala-translate">
         <div className="mandala-svg-container">
           <svg
             width="675"
@@ -37,85 +21,23 @@ function Mandala({
               <path
                 d="M337.5,337.5 m-320,0 a320,320 0 1,1 640,0 a320,320 0 1,1 -640,0"
                 id="circle1"
-              >
-                {/*<!--<animateMotion dur="20s" repeatCount="indefinite" rotate="auto"
-				path="M1,1 a1,1 0 1,0 2,0 a1,1 0 1,0 -2,0" />-->*/}
-                {animate && (
-                  <animateTransform
-                    attributeName="transform"
-                    begin="0s"
-                    dur="500s"
-                    type="rotate"
-                    from="0 337.5 337.5"
-                    to="360 337.5 337.5"
-                    repeatCount="indefinite"
-                  />
-                )}
-              </path>
+              ></path>
               <path
                 d="M337.5,337.5 m-280,0 a280,280 0 1,1 560,0 a280,280 0 1,1 -560,0"
                 id="circle2"
-              >
-                {animate && (
-                  <animateTransform
-                    attributeName="transform"
-                    begin="0s"
-                    dur="500s"
-                    type="rotate"
-                    from="360 337.5 337.5"
-                    to="0 337.5 337.5"
-                    repeatCount="indefinite"
-                  />
-                )}
-              </path>
+              ></path>
               <path
                 d="M337.5,337.5 m-240,0 a240,240 0 1,1 480,0 a240,240 0 1,1 -480,0"
                 id="circle3"
-              >
-                {animate && (
-                  <animateTransform
-                    attributeName="transform"
-                    begin="0s"
-                    dur="500s"
-                    type="rotate"
-                    from="0 337.5 337.5"
-                    to="360 337.5 337.5"
-                    repeatCount="indefinite"
-                  />
-                )}
-              </path>
+              ></path>
               <path
                 d="M337.5,337.5 m-200,0 a200,200 0 1,1 400,0 a200,200 0 1,1 -400,0"
                 id="circle4"
-              >
-                {animate && (
-                  <animateTransform
-                    attributeName="transform"
-                    begin="0s"
-                    dur="500s"
-                    type="rotate"
-                    from="360 337.5 337.5"
-                    to="0 337.5 337.5"
-                    repeatCount="indefinite"
-                  />
-                )}
-              </path>
+              ></path>
               <path
                 d="M337.5,337.5 m-160,0 a160,160 0 1,1 320,0 a160,160 0 1,1 -320,0"
                 id="circle5"
-              >
-                {animate && (
-                  <animateTransform
-                    attributeName="transform"
-                    begin="0s"
-                    dur="500s"
-                    type="rotate"
-                    from="0 337.5 337.5"
-                    to="360 337.5 337.5"
-                    repeatCount="indefinite"
-                  />
-                )}
-              </path>
+              ></path>
             </defs>
             <text dy="70" textLength="2010">
               <textPath textLength="2010" href="#circle1">