<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);

ScrollTrigger.defaults({
  markers: false
});

// Animate From To
$(".stickey_circle_wrap").each(function (index) {
  let triggerElement = $(this);
  let targetElement = $(".circle");

  let tl = gsap.timeline({
    scrollTrigger: {
      trigger: triggerElement,
      // trigger element - viewport
      start: "top top",
      end: "bottom bottom",
      scrub: 1
    }
  });
  tl.fromTo(targetElement, {
      width: "100%",
      height: "90vh",
      borderRadius: "0px"
    },
    {
      width: "40em",
      height: "30em",
      borderRadius: "20em",
      duration: 1
    }
  );
});
</script>