Grow And Shrink Animation 2 – animations.thedreamer.in

Grow & Shrink

with A dream to Create Amazing Design- Based Solutions |

I will grow & Shrik

				
					add class ".shrink-grow-section"
Add following code to your page

				
					  .shrink-grow-section {
      background-color: #CBB6A9;
      opacity: 1;
      transition: opacity 0.3s ease;
	    will-change: transform, opacity;
}

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


gsap.registerPlugin(ScrollTrigger);
const shrinkGrowSection = gsap.timeline({
  scrollTrigger: {
    trigger: ".shrink-grow-section", // You can name this class whatever you want
    start: '-350px center', // Adjust this value as needed
    scrub: true, // For smoother animation
    end: "300px center", // Adjust this value as needed
   
    markers: true, // Delete this on live site
  },
});

shrinkGrowSection
  .fromTo(".shrink-grow-section", { scale: 0.4 }, { scale: 0.9 }) // Grow-Shrink animation 
  
</script>