Do you want code or template?

1. Save time and import template

Get website template including all materials

2. Get code and classes here:

Use this javascript code:

				
					
<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: "40em",
      height: "30em",
      borderRadius: "20em"
    },
    {
      width: "100%",
      height: "90vh",
      borderRadius: "0px",
      duration: 1
    }
  );
});
</script>
				
			

Classes:

				
					stickey_circle_wrap

circle
				
			

Code if you want to make it responsive:

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

  // 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>

				
			

Youtube tutorial:

Want more GSAP tutorials?

Want more GSAP blog post?