feat: implement prefers reduced motion for anims

2026-03-09 11:45:34 +01:00
parent 9bfae3bcee
commit c1e9c5b127
10 changed files with 473 additions and 456 deletions
@@ -125,74 +125,78 @@ import ArrowDown from "../icons/ArrowDown.astro";
  const heroSection = document.querySelector(".hero");

  if (heroSection) {
-    const tl = gsap.timeline().pause();
+    const mm = gsap.matchMedia();

-    tl.addLabel("heading", 0);
-    tl.addLabel("image", 0.2);
-    tl.addLabel("text", 0.8);
-    tl.addLabel("arrow", 1.5);
+    mm.add("(prefers-reduced-motion: no-preference)", () => {
+      const tl = gsap.timeline().pause();

-    tl.from(
-      heroSection.querySelector(".image"),
-      {
-        duration: 2,
-        opacity: 0,
-        xPercent: 10,
-        ease: "expo.out",
-      },
-      "image",
-    );
+      tl.addLabel("heading", 0);
+      tl.addLabel("image", 0.2);
+      tl.addLabel("text", 0.8);
+      tl.addLabel("arrow", 1.5);

-    new SplitText(heroSection.querySelector("h1"), {
-      type: "words, chars",
-      autoSplit: true,
-      mask: "chars",
-      charsClass: "char",
-      onSplit: (self) => {
-        tl.from(
-          self.chars,
-          {
-            duration: 1,
-            yPercent: -120,
-            scale: 1.2,
-            stagger: 0.015,
-            ease: "expo.out",
-            onComplete: () => self.revert(),
-          },
-          "heading",
-        );
-      },
+      tl.from(
+        heroSection.querySelector(".image"),
+        {
+          duration: 2,
+          opacity: 0,
+          xPercent: 10,
+          ease: "expo.out",
+        },
+        "image",
+      );
+
+      new SplitText(heroSection.querySelector("h1"), {
+        type: "words, chars",
+        autoSplit: true,
+        mask: "chars",
+        charsClass: "char",
+        onSplit: (self) => {
+          tl.from(
+            self.chars,
+            {
+              duration: 1,
+              yPercent: -120,
+              scale: 1.2,
+              stagger: 0.015,
+              ease: "expo.out",
+              onComplete: () => self.revert(),
+            },
+            "heading",
+          );
+        },
+      });
+
+      new SplitText(heroSection.querySelector("p"), {
+        type: "lines, words",
+        autoSplit: true,
+        mask: "lines",
+        linesClass: "line",
+        onSplit: (self) => {
+          tl.from(
+            self.lines,
+            {
+              duration: 0.9,
+              yPercent: 105,
+              stagger: 0.06,
+              ease: "expo.out",
+              onComplete: () => self.revert(),
+            },
+            "text",
+          ).play();
+        },
+      });
+
+      tl.from(
+        heroSection.querySelector(".down"),
+        {
+          duration: 1,
+          opacity: 0,
+          translateY: "-100%",
+          ease: "bounce.out",
+        },
+        "arrow",
+      );
    });
-
-    new SplitText(heroSection.querySelector("p"), {
-      type: "lines, words",
-      autoSplit: true,
-      mask: "lines",
-      linesClass: "line",
-      onSplit: (self) => {
-        tl.from(
-          self.lines,
-          {
-            duration: 0.9,
-            yPercent: 105,
-            stagger: 0.06,
-            ease: "expo.out",
-            onComplete: () => self.revert(),
-          },
-          "text",
-        ).play();
-      },
-    });
-
-    tl.from(
-      heroSection.querySelector(".down"),
-      {
-        duration: 1,
-        opacity: 0,
-        translateY: "-100%",
-        ease: "bounce.out",
-      },
-      "arrow",
-    );
  }
 </script>