Animated Curvy SVG Section on Scroll

Is there anything that GSAP cannot animate? In this video I'll show you how to make curvy section transitions with SVG in Figma and how to animate them on scroll by tweening the SVG path d attribute.

Watch the Tutorial on YouTubeGet the Project Cloneable

Inside <head> tag

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

Inside </body> tag

<script>
window.Webflow ||= [];
window.Webflow.push(() => {
	gsap.registerPlugin(ScrollTrigger);

  const pathsToAnimate = document.querySelectorAll(
    '[wb-element="path-to-animate"]'
  );

  pathsToAnimate.forEach((path) => {
    const finalPath = path.getAttribute("wb-final-path");
    gsap
      .timeline({
        scrollTrigger: {
          trigger: path,
          start: "top bottom",
          end: "bottom top",
          scrub: 1
        }
      })
      .to(path, {
        attr: { d: finalPath },
        ease: "none"
      });
  });
});
</script>