feat: implement prefers reduced motion for anims

src/pages/privacy.astro

@@ -134,30 +134,34 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     const page = document.querySelector(".privacy");
 
     if (page) {
-        new SplitText(page.querySelector("h1"), {
-            type: "words, chars",
-            autoSplit: true,
-            mask: "chars",
-            charsClass: "char",
-            onSplit: (self) => {
-                gsap.from(self.chars, {
-                    duration: 1,
-                    yPercent: -120,
-                    scale: 1.2,
-                    stagger: 0.015,
-                    ease: "expo.out",
-                    onComplete: () => self.revert(),
-                });
-            },
-        });
+        const mm = gsap.matchMedia();
 
-        gsap.from(page.querySelectorAll(".content > *"), {
-            duration: 1,
-            delay: 0.3,
-            opacity: 0,
-            yPercent: -20,
-            ease: "expo.out",
-            stagger: 0.1,
+        mm.add("(prefers-reduced-motion: no-preference)", () => {
+            new SplitText(page.querySelector("h1"), {
+                type: "words, chars",
+                autoSplit: true,
+                mask: "chars",
+                charsClass: "char",
+                onSplit: (self) => {
+                    gsap.from(self.chars, {
+                        duration: 1,
+                        yPercent: -120,
+                        scale: 1.2,
+                        stagger: 0.015,
+                        ease: "expo.out",
+                        onComplete: () => self.revert(),
+                    });
+                },
+            });
+
+            gsap.from(page.querySelectorAll(".content > *"), {
+                duration: 1,
+                delay: 0.3,
+                opacity: 0,
+                yPercent: -20,
+                ease: "expo.out",
+                stagger: 0.1,
+            });
         });
     }
 </script>