Landing page GSAP & Elementor ep. 1

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


<script>

gsap.registerPlugin(ScrollTrigger);

document.querySelectorAll(".grow-section").forEach((section) => {
  gsap.fromTo(section, 
    {
      scale: 0.9, // Start slightly smaller
      opacity: 1, // Always visible
      clipPath: "inset(10% 10% 10% 10%)", // Keep a portion visible at the bottom
    }, 
    {
      scale: 1, // Grow to full size
      clipPath: "inset(0% 0% 0% 0%)", // Fully reveal
      ease: "power2.out",
      scrollTrigger: {
        trigger: section,
        start: "top 90%", // Start when 10% of the section is visible
        end: "top 30%", // End when it's further in view
        scrub: true, // Smooth scroll effect
      }
    }
  );
});
</script>

.image-mask {
  width: 100%;
  height: 100%; /* the starting height; this will be animated */
  overflow: hidden;
  transform-origin: center top;
  transition: transform 0.9s ease-out;
}

.project-section{
    height: 70vh;
}