GSAP grow & shrink dot on page scroll

CSS

  .block {
    width: 100%;
    height: 50vh;
  }
  
	.dot {
		  position: absolute;
		  left: 50%;
		  top: 50%;
		  width:150vmax;
		  height: 150vmax;
		  border-radius: 50%;
		  background-color: #E34248;
		  overflow-x: hidden;
	  }

HTML

<div class="block block--1">
    
    <div class="dot"></div>  
    
</div>
<div class="block block--2"></div>

JavaScript

<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);

		gsap.set(".dot", {xPercent: -50, yPercent: -50});
		
		let tl = gsap.timeline({
		  scrollTrigger: {
		    trigger: ".block",
		    start: "top top",
		    end: "+=100%",
		    scrub: 0.5,
		    pin: ".dot"
		  },
		})

	tl.from(".dot", {
	  scale: 0.1,
	  repeat: 1,
	  yoyo: true
})
</script>