<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.4.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.3.3/ScrollTrigger.min.js"></script>

<style>
    .reveal {
       overflow: hidden;
    }
</style>

<script>
    gsap.registerPlugin(ScrollTrigger);

    let revealContainers = document.querySelectorAll(".reveal");

    revealContainers.forEach((container) => {
      let image = container.querySelector("img");
      let tl = gsap.timeline({
        scrollTrigger: {
          trigger: container,
          toggleActions: "restart none none reset",
          start: "top 50%",
          end: "bottom 20%"
        }
      });

      tl.set(container, { autoAlpha: 1 });
      tl.from(container, 1.5, {
        opacity: 0,
        ease: Power2.out
      });
      tl.from(image, 1.5, {
        opacity: 0,
        scale: 1.3,
        delay: -1.5,
        ease: Power2.out
      });
    });
</script>