From 2afa6664dc28042f140693d041a62afc654ece40 Mon Sep 17 00:00:00 2001
From: Alexander Loren <omgitsalexl@icloud.com>
Date: Fri, 18 Sep 2026 12:00:18 -0700
Subject: [PATCH] Added parallax effects to the images

---
 index.html | 62 ++++++++++++++++++++++++++++++++++++------------------
 1 file changed, 42 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index c7e70cc..ca2e77a 100644
--- a/index.html
+++ b/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,19 +463,42 @@
 
   <script>
     document.addEventListener("DOMContentLoaded", (event) => {
-      gsap.registerPlugin(ScrollTrigger,ScrollSmoother)
+      gsap.registerPlugin(ScrollTrigger);
 
-      gsap.utils.toArray(".animate-header").forEach((header) => {
-        gsap.from(header, {
-          scrollTrigger: {
-            trigger: header,
-            start: "top 80%",
-            toggleActions: "play none none none",
-          },
-          y: 50,
-          opacity: 0,
-          duration: 1,
-          ease: "power2.out",
+      gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
+        gsap.utils.toArray(".animate-header").forEach((header) => {
+          gsap.from(header, {
+            scrollTrigger: {
+              trigger: header,
+              start: "top 80%",
+              toggleActions: "play none none none",
+            },
+            y: 50,
+            opacity: 0,
+            duration: 1,
+            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,
+            },
+          });
         });
       });
     });