Landing page GSAP & Elementor ep. 5

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


<script>
gsap.registerPlugin(SplitText);

document.addEventListener("DOMContentLoaded", () => {
  const profileImagesContainer = document.querySelector(".profile-images");
  const profileImages = document.querySelectorAll(".profile-images .img-team");
  const nameElements = document.querySelectorAll(".profile-names .name");
  const nameHeadings = document.querySelectorAll(".profile-names .name h2");

  nameHeadings.forEach((heading) => {
    const split = new SplitText(heading, { type: "chars" });
    split.chars.forEach((char) => {
      char.classList.add("letter");
    });
  });

  const defaultLetters = nameElements[0].querySelectorAll(".letter");
  gsap.set(defaultLetters, { y: "100%" });

  if (window.innerWidth >= 900) {
    profileImages.forEach((img, index) => {
      const correspondingName = nameElements[index + 1];
      const letters = correspondingName.querySelectorAll(".letter");

      img.addEventListener("mouseenter", () => {
        gsap.to(img, {
          width: 140,
          height: 140,
          duration: 0.5,
          ease: "power4.out",
        });

        gsap.to(letters, {
          y: "-100%",
          ease: "power4.out",
          duration: 0.75,
          stagger: {
            each: 0.025,
            from: "center",
          },
        });
      });

      img.addEventListener("mouseleave", () => {
        gsap.to(img, {
          width: 100,
          height: 100,
          duration: 0.5,
          ease: "power4.out",
        });

        gsap.to(letters, {
          y: "0%",
          ease: "power4.out",
          duration: 0.75,
          stagger: {
            each: 0.025,
            from: "center",
          },
        });
      });
    });

    profileImagesContainer.addEventListener("mouseenter", () => {
      gsap.to(defaultLetters, {
        y: "0%",
        ease: "power4.out",
        duration: 0.75,
        stagger: {
          each: 0.025,
          from: "center",
        },
      });
    });

    profileImagesContainer.addEventListener("mouseleave", () => {
      gsap.to(defaultLetters, {
        y: "100%",
        ease: "power4.out",
        duration: 0.75,
        stagger: {
          each: 0.025,
          from: "center",
        },
      });
    });
  }
});

</script>

.team {
  gap: 2.5em;
  overflow: hidden;
}

.profile-images {
  width: max-content;
}

.img-team {
  width: 100px;
  height: 100px;
  padding: 5px;
  cursor: pointer;
  will-change: width, height;
}

.profile-names {
  width: 100%;
  height: 13rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  overflow: hidden;
}

.profile-names .name {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.name h2 {
  position: absolute;
  width: 100%;
  text-align: center;
  text-transform: uppercase;
  font-size: 15rem;
  user-select: none;
  transform: translateY(100%);
}

.name.default h2 {
  transform: translateY(-100%);
}

.name h2 .letter {
  position: relative;
  transform: translateY(0%);
  will-change: transform;
}