Added parallax effects to the images

index.html

@@ -19,7 +19,6 @@
 
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/gsap.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollTrigger.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/gsap@3.15/dist/ScrollSmoother.min.js"></script>
   </head>
 
   <body id="top">
@@ -80,7 +79,7 @@
           </a>
         </div>
 
-        <figure class="homepage-hero-image-figure" data-speed="0.5">
+        <figure class="homepage-hero-image-figure" data-parallax="10">
           <div
             class="photography-frame photography-frame-tall"
             role="img"
@@ -100,7 +99,7 @@
           </header>
 
           <div class="philosophy-content-grid">
-            <figure class="philosophy-image-figure">
+            <figure class="philosophy-image-figure" data-parallax="10">
               <div
                 class="photography-frame photography-frame-portrait"
                 role="img"
@@ -175,7 +174,7 @@
               </a>
             </div>
 
-            <figure class="approach-image-figure">
+            <figure class="approach-image-figure" data-parallax="10">
               <div
                 class="photography-frame photography-frame-landscape"
                 role="img"
@@ -244,7 +243,7 @@
           </div>
 
           <div class="work-gallery-grid" aria-label="Imagined holiday settings">
-            <figure class="work-gallery-primary-figure">
+            <figure class="work-gallery-primary-figure" data-parallax="10">
               <div
                 class="photography-frame photography-frame-wide"
                 role="img"
@@ -261,7 +260,7 @@
               </figcaption>
             </figure>
 
-            <figure class="work-gallery-secondary-figure">
+            <figure class="work-gallery-secondary-figure" data-parallax="10">
               <div
                 class="photography-frame photography-frame-portrait"
                 role="img"
@@ -278,7 +277,7 @@
               </figcaption>
             </figure>
 
-            <figure class="work-gallery-detail-figure">
+            <figure class="work-gallery-detail-figure" data-parallax="10">
               <div
                 class="photography-frame photography-frame-square"
                 role="img"
@@ -314,7 +313,7 @@
               </a>
             </div>
 
-            <figure class="client-fit-image-figure">
+            <figure class="client-fit-image-figure" data-parallax="10">
               <div
                 class="photography-frame photography-frame-landscape"
                 role="img"
@@ -464,8 +463,9 @@
 
   <script>
     document.addEventListener("DOMContentLoaded", (event) => {
-      gsap.registerPlugin(ScrollTrigger,ScrollSmoother)
+      gsap.registerPlugin(ScrollTrigger);
 
+      gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
         gsap.utils.toArray(".animate-header").forEach((header) => {
           gsap.from(header, {
             scrollTrigger: {
@@ -479,6 +479,28 @@
             ease: "power2.out",
           });
         });
+
+        gsap.utils.toArray("figure[data-parallax]").forEach((figure) => {
+          const motion = Number(figure.dataset.parallax);
+          if (!Number.isFinite(motion) || motion === 0) return;
+
+          const frame = figure.querySelector(".photography-frame");
+
+          gsap.fromTo(figure, {
+            y: () => frame.offsetHeight * motion / 200,
+          }, {
+            y: () => -frame.offsetHeight * motion / 200,
+            ease: "none",
+            scrollTrigger: {
+              trigger: figure,
+              start: "clamp(top bottom)",
+              end: "clamp(bottom top)",
+              scrub: true,
+              invalidateOnRefresh: true,
+            },
+          });
+        });
+      });
     });
   </script>
 </html>