SVG MotionPath not updating on window resize.

[Web Bae]

Hello,

 

I'm trying out MotionPathPlugin and got it working pretty well. The only problem I'm having is that when I resize the window, the gsap path doesn't adjust (though the SVG path does).

 

My example: https://gsap-svg-motion-path-2c092395cde6d4a702.webflow.io/

Example I want to achieve: 

 

I could write function to reset the tween on window resize event but don't see anything like that in the "example I want to achieve" codepen. Am I missing something?

 

Thanks!

Keegan

See the Pen LwzMKL by GreenSock (@GreenSock) on CodePen

[Web Bae]

I managed to get it working by recalculating the tween on window resize but curious if there's a better way to do it still.

 

import { gsap } from "gsap";
import { MotionPathPlugin } from "gsap/MotionPathPlugin";

gsap.registerPlugin(MotionPathPlugin);

let tween;

const initMotionPath = () => {
  let progress = tween ? tween.progress() : 0;
  tween && tween.progress(0).kill();

  tween = gsap.to("#dot", {
    motionPath: {
      path: "#path",
      align: "#path",
      alignOrigin: [0.5, 0.5],
      autoRotate: true,
    },
    duration: 8,
    repeat: -1,
    repeatDelay: 3,
    ease: "none",
  });

  tween.progress(progress);
};

document.addEventListener("DOMContentLoaded", initMotionPath);
window.addEventListener("resize", initMotionPath);

 

[GreenSock]

Hey @Web Bae! Love your work. 

 

And yes, you nailed it. Here's how I'd probably do it (basically the same concept as what you did): 

See the Pen LYBWqpj?editors=1010 by GreenSock (@GreenSock) on CodePen

 

The reason the original demo didn't require anything like that is because the "<rect>" element is INSIDE the SVG, so the coordinate space is identical to the <path>'s. In other words, it resizes along with the whole SVG. But when you animate something that lives OUTSIDE that <svg> coordinate space, then of course it will need to get re-mapped to the new coordinate space after you resize. MotionPathPlugin makes it look so easy, but it's doing a bunch of work under the hood to convert between coordinate spaces. It would be crazy expensive if it constantly did that conversion on every tick of the animation. 

 

Think of it like it draws a copy of that path but in the target's own coordinate space so that its x/y values sit directly on top of that and can follow it...but if you resize things, obviously all those coordinates have to get re-calculated. 

 

Does that clear things up? 

[Web Bae]

Thanks Jack,

 

It helps but I'm still not quite there. I got resize working great but have problem with coordinate space on initial load.

 

On initial load, it's not aligning to the path's coordinate space and animating off in the pacific ocean 🤣. Once I refresh everything is perfect. Any thoughts?

 

Here's a little video description: 

 

[GreenSock]

Hm, it's tough to diagnose without digging into the code/demo, but that sounds to me like some kind of issue where you're creating the tween when the element isn't in the DOM (at least not where it ends up ultimately). Are you dynamically loading stuff in?

For example, let's say you've got the elements in a container that's not added to the DOM yet at all, and you create your tween and THEN you add the container to the DOM...when MotionPathPlugin tried to map the coordinates, it couldn't figure them out properly because it wasn't in the viewport (yet). 

 

If I had a minimal demo (like in CodePen or CodeSandbox or Stackblitz) I could probably be a lot more help

[Web Bae]

Of course ... it seems to be working in the code pen without issue haha. Still having the issue on initial load with my Webflow site though. Since I'm waiting for the DOMContentLoaded event I am inclined to think everything should be loaded already but on the other hand I totally agree with you haha.

 

Here's the pen: 

See the Pen XWBMOLz by learyjk (@learyjk) on CodePen

 

[Web Bae]

Definitely an issue in how I'm bundling / loading the scripts in VS Code. I moved the code to codesandbox and loaded the gsap scripts from CDN and not having the problem with initial load now. Weird.

[GreenSock]

I noticed you've got loading="lazy" on your image. I bet that's the issue. When MotionPathPlugin does the coordinate mapping, your image isn't loaded yet, so things are collapsed...and then it loads and shifts things (layout-wise). Have you tried giving your image a width/height to prevent the layout shift? Or just wrap your GSAP-related code in a "load" event listener? 

[Web Bae]

Awesome! thanks so much pretty sure I had tried wrapping everything in a window load event listener but things were a bit all over the place for a minute there. Anyways it's working great now and I was able to publish my youtube video :).

 

Thanks so much for the help!

[GreenSock]

Yeah, I think that when you define loading="lazy" on images, the browser won't wait for those to load before firing the window's "load" event. So my guess is that even if you listened for the window's "load" event, it wouldn't really solve the problem (unless you removed loading="lazy" from the images of course). You'd have to listen for that individual image's "load" event to get dispatched. 

 

Glad you got your video out. Keep 'em coming! 💚