Do you want code or template?

				
					<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/jquery/3.7.1/jquery.min.js?ver=1767193460"></script>
<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.8.0/gsap.min.js?ver=1767193460"></script>
<script data-minify="1" src="https://nicolaipalmkvist.com/wp-content/cache/min/1/ajax/libs/gsap/3.8.0/ScrollTrigger.min.js?ver=1767193460"></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
    }
  });

  // Check screen width for breakpoint
  if (window.matchMedia("(max-width: 768px)").matches) {
    // Mobile/Tablet
    tl.fromTo(targetElement, {
        width: "10em", // Breakpoint width
        height: "30em",
        borderRadius: "20em"
      },
      {
        width: "100%",
        height: "90vh",
        borderRadius: "0px",
        duration: 1
      }
    );
  } else {
    // Desktop
    tl.fromTo(targetElement, {
        width: "40em", // Original width
        height: "30em",
        borderRadius: "20em"
      },
      {
        width: "100%",
        height: "90vh",
        borderRadius: "0px",
        duration: 1
      }
    );
  }
});
</script>