<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
 
 <script>
 document.addEventListener('DOMContentLoaded', function() {
 gsap.registerPlugin(ScrollTrigger)
 
 gsap.from(".image2", {
    scrollTrigger: {
    trigger: ".text2",
     start: "top 30%",
    end: "top 15%",
        markers:false,
        scrub:1,
    },
    opacity: 0,
 ease: "none", 
});

 gsap.to(".image1", {
    scrollTrigger: {
    trigger: ".text2",
     start: "top 30%",
    end: "top 15%",
           markers:false,
        scrub:1,
    },
    opacity: 0,
 ease: "none",
});

gsap.from(".image3", {
    scrollTrigger: {
    trigger: ".text3",
      start: "top 30%",
    end: "top 15%",
          markers:false,
        scrub:1,
    },
    opacity: 0,
 ease: "none",
});

 gsap.to(".image2", {
    scrollTrigger: {
    trigger: ".text3",
     start: "top 30%",
    end: "top 15%",
         markers:false,
        scrub:1,
    },
    opacity: 0,
 ease: "none",
});

gsap.from(".image4", {
    scrollTrigger: {
    trigger: ".text4",
     start: "top 30%",
    end: "top 15%",
      markers:false,
        scrub:1,
    },
    opacity: 0,
 ease: "none",
});

 gsap.to(".image3", {
    scrollTrigger: {
    trigger: ".text4",
   start: "top 30%",
    end: "top 15%",
        markers:false,
        scrub:1,
    },
    opacity: 0,
 ease: "none",
});



     
   });
   </script>