feat: implement prefers reduced motion for anims

src/components/Footer.astro

@@ -148,6 +148,9 @@ function getCurrentYear() {
   const footer = document.querySelector("footer");
 
   if (footer) {
+    const mm = gsap.matchMedia();
+
+    mm.add("(prefers-reduced-motion: no-preference)", () => {
       gsap.from(footer, {
         scrollTrigger: {
           trigger: footer,
@@ -156,7 +159,9 @@ function getCurrentYear() {
         duration: 2,
         opacity: 0,
         yPercent: 10,
+        // yPercent: 10,
         ease: "expo.out",
       });
+    });
   }
 </script>

src/components/Header.astro

@@ -82,6 +82,9 @@ import SkipNavLink from "./SkipNavLink.astro";
   const header = document.querySelector("header");
 
   if (header) {
+    const mm = gsap.matchMedia();
+
+    mm.add("(prefers-reduced-motion: no-preference)", () => {
       const tl = gsap.timeline();
 
       tl.from(header.children, {
@@ -91,5 +94,6 @@ import SkipNavLink from "./SkipNavLink.astro";
         stagger: 0.2,
         ease: "expo.out",
       });
+    });
   }
 </script>

src/components/landing/AboutSection.astro

@@ -122,6 +122,9 @@ import { Picture } from "astro:assets";
     const aboutSection = document.querySelector(".about");
 
     if (aboutSection) {
+        const mm = gsap.matchMedia();
+
+        mm.add("(prefers-reduced-motion: no-preference)", () => {
             const tl = gsap.timeline({
                 scrollTrigger: {
                     trigger: aboutSection,
@@ -204,5 +207,6 @@ import { Picture } from "astro:assets";
                     );
                 },
             });
+        });
     }
 </script>

src/components/landing/ContactSection.astro

@@ -104,6 +104,9 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
   const contactSection = document.querySelector(".contact");
 
   if (contactSection) {
+    const mm = gsap.matchMedia();
+
+    mm.add("(prefers-reduced-motion: no-preference)", () => {
       const tl = gsap.timeline({
         scrollTrigger: {
           trigger: contactSection,
@@ -199,5 +202,6 @@ import ArrowUpRight from "../icons/ArrowUpRight.astro";
         },
         "arrow",
       );
+    });
   }
 </script>

src/components/landing/HeroSection.astro

@@ -125,6 +125,9 @@ import ArrowDown from "../icons/ArrowDown.astro";
   const heroSection = document.querySelector(".hero");
 
   if (heroSection) {
+    const mm = gsap.matchMedia();
+
+    mm.add("(prefers-reduced-motion: no-preference)", () => {
       const tl = gsap.timeline().pause();
 
       tl.addLabel("heading", 0);
@@ -194,5 +197,6 @@ import ArrowDown from "../icons/ArrowDown.astro";
         },
         "arrow",
       );
+    });
   }
 </script>

src/components/landing/ServicesSection.astro

@@ -110,6 +110,9 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
     const servicesSection = document.querySelector(".services");
 
     if (servicesSection) {
+        const mm = gsap.matchMedia();
+
+        mm.add("(prefers-reduced-motion: no-preference)", () => {
             const tl = gsap.timeline({
                 scrollTrigger: {
                     trigger: servicesSection,
@@ -173,5 +176,6 @@ const services: Array<ComponentProps<typeof ServicesCard>> = [
                 },
                 "cards",
             );
+        });
     }
 </script>

src/components/landing/ValuesSection.astro

@@ -113,6 +113,9 @@ function formatIndex(index: number) {
     const valuesSection = document.querySelector(".values");
 
     if (valuesSection) {
+        const mm = gsap.matchMedia();
+
+        mm.add("(prefers-reduced-motion: no-preference)", () => {
             const heading = valuesSection.querySelector("h2");
 
             new SplitText(heading, {
@@ -210,5 +213,6 @@ function formatIndex(index: number) {
                     },
                 });
             });
+        });
     }
 </script>

src/pages/imprint.astro

@@ -63,6 +63,9 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     const page = document.querySelector(".imprint");
 
     if (page) {
+        const mm = gsap.matchMedia();
+
+        mm.add("(prefers-reduced-motion: no-preference)", () => {
             new SplitText(page.querySelector("h1"), {
                 type: "words, chars",
                 autoSplit: true,
@@ -88,5 +91,6 @@ import BaseLayout from "../layouts/BaseLayout.astro";
                 ease: "expo.out",
                 stagger: 0.1,
             });
+        });
     }
 </script>

src/pages/old/blog.astro

@@ -1,20 +0,0 @@
----
-import BaseLayout from "../layouts/BaseLayout.astro";
-const allPosts = Object.values(
-  import.meta.glob("./posts/*.md", { eager: true }),
-);
-const pageTitle = "My Astro Learning Blog";
----
-
-<BaseLayout pageTitle={pageTitle}>
-  <p>This is where I will post about my journey learning Astro.</p>
-  <ul>
-    {
-      allPosts.map((post: any) => (
-        <li>
-          <a href={post.url}>{post.frontmatter.title}</a>
-        </li>
-      ))
-    }
-  </ul>
-</BaseLayout>

src/pages/privacy.astro

@@ -134,6 +134,9 @@ import BaseLayout from "../layouts/BaseLayout.astro";
     const page = document.querySelector(".privacy");
 
     if (page) {
+        const mm = gsap.matchMedia();
+
+        mm.add("(prefers-reduced-motion: no-preference)", () => {
             new SplitText(page.querySelector("h1"), {
                 type: "words, chars",
                 autoSplit: true,
@@ -159,5 +162,6 @@ import BaseLayout from "../layouts/BaseLayout.astro";
                 ease: "expo.out",
                 stagger: 0.1,
             });
+        });
     }
 </script>