Landing page GSAP & Elementor ep. 4

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


<script>

  gsap.registerPlugin(ScrollTrigger);

  
document.addEventListener("DOMContentLoaded", function () {
  const footer = document.querySelector(".last-cont");
  const lastCard = document.querySelector(".card.scroll");
  const pinnedSections = gsap.utils.toArray(".pinned");

  pinnedSections.forEach((section, index, sections) => {
    let img = section.querySelector(".img");

    let nextSection = sections[index + 1] || lastCard;
    let endScalePoint = `top+=${nextSection.offsetTop - section.offsetTop} top`;

    gsap.to(section, {
      scrollTrigger: {
        trigger: section,
        start: "center center",
        end:
          index === sections.length
            ? `+=${lastCard.offsetHeight / 2}`
            : footer.offsetTop - window.innerHeight,
        pin: true,
        pinSpacing: false,
        scrub: 1,
      },
    });

    gsap.fromTo(
      img,
      { scale: 1 },
      {
        scale: 0.5,
        ease: "none",
        scrollTrigger: {
          trigger: section,
          start: "top top",
          end: endScalePoint,
          scrub: 1,
        },
      }
    );
  });

  const heroH1 = document.querySelector(".hero h1");
  ScrollTrigger.create({
    trigger: document.body,
    start: "top top",
    end: "+=350vh",
    scrub: 1,
    onUpdate: (self) => {
      let opacityProgress = self.progress;
      heroH1.style.opacity = 1 - opacityProgress;
    },
  });
});
</script>

h1 {
    transition: 0s;
}

.hero h1 .image {
  position: absolute;
  transform: translate(-50%, -50%);
  transition: 0s;
}

.card.scroll {
  position: relative;
}

.img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: 1000px;
  height: 700px;
 
transition: 0s;

}