How to build a grow-shrink section with GSAP and Elementor on scrolltrigger

<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.8, // 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 60%", // Start when 10% of the section is visible
        markers: true,
        end: "top 40%", // End when it's further in view
        scrub: true, // Smooth scroll effect
      }
    }
  );
});
</script>