<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>