Animated SVG curves on scroll, it's like the website is breathing

You might be thinking, “This sounds complicated and unnecessary, like making artisanal ice cubes,” but trust me, it’s not. Well, at least not after this walk-through. We’re going to take an SVG path, stretch and twist it as you scroll, and make it look like your website is breathing, in a good way.

First Thing’s First: Let’s Make an SVG

No, you don’t have to go to art school for this. I didn’t, and I’m still here. Fire up Figma (or whatever you prefer), grab the pen tool, and draw a curvy line. A couple of clicks later, you’ll have something that vaguely resembles an animation-worthy shape. Be sure to close off the shape.

It doesn’t have to be perfect. In fact, if it’s too perfect, it’ll just look fake, like those stock photos of “real” people laughing at salad. Now, once you’ve got something squiggly and interesting, we’ll need to get two versions: the start path and the end path. These are the shapes your SVG will morph between.

In Figma, copy the SVG code of both shapes. You’ll need them in a minute. Ready? Good.

Dropping the SVG into Webflow

Open up your Webflow project. We’re adding the SVG to your layout as an absolute-positioned element. No big deal. Paste the starting SVG into an embed element. You can ignore any nonsense about height—just set the width to 100% and height to auto. Make sure the section it lives in is set to relative, so the SVG actually stays where it’s supposed to, it has position absolute, remember?

Here’s a little trick: we’ll attach some custom attributes to our SVG paths to make life easier later. Slap a wb-element="path-to-animate" attribute on the path you want to animate, and another one like wb-final-path on the path data you want it to animate to. Path is a keyword here, SVGs have a thing called path that define the shape.

Time for the Fun Part: GSAP to the Rescue

You didn’t think I’d make you do this by hand, did you? I’m lazy, and you should be too. We’re using GSAP’s ScrollTrigger plugin because it makes animating on scroll a breeze. If you’ve never used GSAP before, it’s like the cheat code for animations—just plug in some settings, and it does all the heavy lifting for you.

Here’s the simplified version of what we’re doing:

1. Register the ScrollTrigger plugin.
2. Grab all your paths with querySelectorAll (this is where that wb-element attribute comes in).
3. Loop over each path and use GSAP to animate it from the starting path to the final path as the user scrolls.

Here’s the Code (Finally)

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",  // Start when the top of the path hits the bottom of the viewport
        end: "bottom top",    // End when the bottom of the path hits the top of the viewport
        scrub: 1              // Sync animation with scroll
      }
    })
    .to(path, {
      attr: { d: finalPath },  // Animate the 'd' attribute to the final path
      ease: "none"             // No easing, because we want smooth scroll
    });
});

Let’s break this down. First, we register GSAP’s ScrollTrigger plugin, which is going to handle all the timing for us. Then we use querySelectorAll to grab all the SVG paths we want to animate. Simple enough.

Next, for each path, we fetch the wb-final-path attribute (remember that from earlier?). This contains the d attribute (the shape of the SVG) that we want to morph into as the user scrolls.

Finally, we create a GSAP timeline for each path, telling it to animate from the current d value to the final d value as the user scrolls from the top of the path to the bottom of the viewport. And just like that, we’ve got ourselves a scroll animation.

Results: You’re Practically an Animator Now

If you’ve done everything right, your SVG should now stretch and bend like it’s got a life of its own as you scroll. And if you’ve done it wrong, well, you’ll know because it’ll look like garbage.

But assuming you nailed it, congrats! You’re animating SVGs like a pro. This kind of animation adds a little flair to your site without being overly flashy. Just enough to make people pause and think, “Hey, that’s neat,” before scrolling on their merry way.

And that’s it. You’re done! Now go forth and animate all the things, but maybe don’t go overboard. No one wants to feel like they’re trapped in a kaleidoscope while browsing your portfolio.

‍