Landing page GSAP & Elementor ep. 6

<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.13.0/SplitText.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollTrigger.min.js"></script>

<script src="https://unpkg.com/@studio-freight/lenis@1.0.42/dist/lenis.min.js"></script> 

<script>
document.addEventListener("DOMContentLoaded", () => {
  gsap.registerPlugin(ScrollTrigger, SplitText);

  const lenis = new Lenis();
  lenis.on("scroll", ScrollTrigger.update);
  gsap.ticker.add((time) => {
    lenis.raf(time * 1000);
  });
  gsap.ticker.lagSmoothing(0);

  const initTextSplit = () => {
    const textElements = document.querySelectorAll(".col-3 h2, .col-3 p");

    textElements.forEach((element) => {
      const split = new SplitText(element, {
        type: "lines",
        linesClass: "line",
      });
      split.lines.forEach(
        (line) => (line.innerHTML = `<span>${line.textContent}</span>`)
      );
    });
  };

  initTextSplit();

  gsap.set(".col-3 .col-content-wrapper .line span", { y: "0%" });
  gsap.set(".col-3 .col-content-wrapper-2 .line span", { y: "-125%" });

  ScrollTrigger.create({
    trigger: ".sticky-cols",
    start: "top top",
    end: `+=${window.innerHeight * 5}px`,
    pin: true,
    pinSpacing: true,
  });

  let currentPhase = 0;

  ScrollTrigger.create({
    trigger: ".sticky-cols",
    start: "top top",
    end: `+=${window.innerHeight * 6}px`,
    onUpdate: (self) => {
      const progress = self.progress;

      if (progress >= 0.33 && currentPhase === 0) {
        currentPhase = 1;

        gsap.to(".col-1", { opacity: 0, scale: 0.75, duration: 0.75 });
        gsap.to(".col-2", { x: "0%", duration: 0.75 });
        gsap.to(".col-3", { y: "0%", duration: 0.75 });

        gsap.to(".col-img-1 img", { scale: 1.25, duration: 0.75 });
        gsap.to(".col-img-2", {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%)",
          duration: 0.75,
        });
        gsap.to(".col-img-2 img", { scale: 1, duration: 0.75 });
      }

      if (progress >= 0.66 && currentPhase === 1) {
        currentPhase = 2;

        gsap.to(".col-2", { opacity: 0, scale: 0.75, duration: 0.75 });
        gsap.to(".col-3", { x: "0%", duration: 0.75 });
        gsap.to(".col-4", { y: "0%", duration: 0.75 });

        gsap.to(".col-3 .col-content-wrapper .line span", {
          y: "-125%",
          duration: 0.75,
        });
        gsap.to(".col-3 .col-content-wrapper-2 .line span", {
          y: "0%",
          duration: 0.75,
          delay: 0.5,
        });
      }

      if (progress < 0.33 && currentPhase >= 1) {
        currentPhase = 0;

        gsap.to(".col-1", { opacity: 1, scale: 1, duration: 0.75 });
        gsap.to(".col-2", { x: "100%", duration: 0.75 });
        gsap.to(".col-3", { y: "100%", duration: 0.75 });

        gsap.to(".col-img-1 img", { scale: 1, duration: 0.75 });
        gsap.to(".col-img-2", {
          clipPath: "polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%)",
          duration: 0.75,
        });
        gsap.to(".col-img-2 img", { scale: 1.25, duration: 0.75 });
      }

      if (progress < 0.66 && currentPhase === 2) {
        currentPhase = 1;

        gsap.to(".col-2", { opacity: 1, scale: 1, duration: 0.75 });
        gsap.to(".col-3", { x: "100%", duration: 0.75 });
        gsap.to(".col-4", { y: "100%", duration: 0.75 });

        gsap.to(".col-3 .col-content-wrapper .line span", {
          y: "0%",
          duration: 0.75,
          delay: 0.5,
        });
        gsap.to(".col-3 .col-content-wrapper-2 .line span", {
          y: "-125%",
          duration: 0.75,
        });
      }
    },
  });
});

</script>

section {
  position: relative;
  width: 100vw;
  height: 100vh; 
  overflow: hidden;
}



img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0s;
}

.sticky-cols {
  padding: 0.5rem;
   transition: 0s;
}

.sticky-cols-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
   transition: 0s;
}

.col {
  position: absolute;
  width: 50%;
  height: 100%;
  will-change: transform;
   transition: 0s;
}

.col-2 {
  transform: translateX(100%);
   transition: 0s;
}

.col-3 {
  transform: translateX(100%) translateY(100%);
  padding: 0.5rem;
   transition: 0s;
}

.col-4 {
  transform: translateX(100%) translateY(100%);
   transition: 0s;
}

.col-content,
.col-img {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0.5rem;
   transition: 0s;
}

.col-content-wrapper,
.col-img-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
   transition: 0s;
  border-radius: 3rem;
  overflow: hidden;
}

.col-content-wrapper {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
   transition: 0s;
}

.col-content-wrapper-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
   transition: 0s;
}

.col-img-1,
.col-img-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
   transition: 0s;
}

.col-img-2 {
  clip-path: polygon(0% 0%, 100% 0%, 100% 0%, 0% 0%);
   transition: 0s;
}

.col-img-2 img {
  scale: 1.25;
}

.line {
  overflow: hidden;
}

.line span {
  display: block;
  will-change: transform;
}