new gsap animations

web/index.html

@@ -7,11 +7,11 @@
     <title>Web Work Warehouse</title>
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
         integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
-    <!-- <link rel="stylesheet" href="../css/home.css?v1"> -->
     <link rel="preload" as="image" href="img/blob-bg.svg?v1" fetchpriority="high">
-    <link rel="stylesheet" href="style.css?v8">
+    <link rel="stylesheet" href="style.css?v9">
     <link rel="stylesheet" href="../css/reset.css?v1">
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" media="print" onload="this.media='all'">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"
+        media="print" onload="this.media='all'">
 
 
     <meta name="description" content="Webmaster, sviluppo siti web e grafica">
@@ -159,9 +159,9 @@ <h3>Altro&hellip;</h3>
     <div class="after-aboutme"></div>
 
     <div class="pic">
-        <img src="img/me/3.webp" alt="io" style="--index:0">
+        <img src="img/me/3.webp" alt="io" style="--index:2">
         <img src="img/me/2.webp" alt="io" style="--index:1">
-        <img src="img/me/1.webp" alt="io" style="--index:2">
+        <img src="img/me/1.webp" alt="io" style="--index:0">
         <div class="overlay"></div>
         <div class="big">... !</div>
     </div>
@@ -421,6 +421,45 @@ <h3>Altro&hellip;</h3>
         function scrollTriggers() {
             gsap.registerPlugin(ScrollTrigger);
 
+            gsap.to(".pic img:nth-child(1)", {
+                opacity: 0,
+                scrollTrigger: {
+                    trigger: ".pic",
+                    start: "100% 100%",
+                    end: "100% 72.5%", // Changed to make space smaller
+                    scrub: true,
+                    markers: false
+                }
+            });
+
+            gsap.to(".pic img:nth-child(2)", {
+                opacity: 0,
+                scrollTrigger: {
+                    trigger: ".pic",
+                    start: "50% 75%",
+                    end: "100% 0%",
+                    scrub: true,
+                    markers: false
+                }
+            });
+
+
+
+            gsap.to(".pic", {
+                "--bg-position-x": "-10%",
+                scrollTrigger: {
+                    trigger: ".pic",
+                    start: "top bottom",
+                    end: "bottom top",
+                    scrub: true
+                }
+            });
+
+
+
+
+
+
 
             document.querySelectorAll('.aboutme .text p:nth-child(even)').forEach(img => {
                 img.style.transform = "translateX(100vw)";
@@ -464,6 +503,17 @@ <h3>Altro&hellip;</h3>
                 }
             });
 
+            gsap.to(".pic img", {
+                right: "-2.5%",
+                scrollTrigger: {
+                    trigger: ".pic",
+                    start: "top 60%", // Adjusted to start after the first animation
+                    end: "bottom top",
+                    scrub: true
+                }
+            });
+
+
 
             document.querySelectorAll('.pic .big').forEach(img => {
                 img.style.position = "relative";