Copy to clipboard
							
					<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(".growsection").forEach((section) => {
  gsap.fromTo(section, 
    {
      scale: 0.8, // Start slightly smaller
      opacity: 1, // Always visible
      clipPath: "circle(10% at 50% 50%)", // Keep a portion visible at the bottom
    }, 
    {
      scale: 1, // Grow to full size
      clipPath: "circle(100% at 50% 50%)", // Fully reveal
      ease: "power2.out",
      scrollTrigger: {
        trigger: section,
        start: "top 70%", // Start when 10% of the section is visible
        markers: false,
        end: "top 20%", // End when it's further in view
        scrub: true, // Smooth scroll effect
      }
    }
  );
});
</script>