MotionPathHelper frozen. It does not respond to cursor at all.

[Robert Pfaff]

I've struggled bunches with MotionPathHelper in the past, and in many previous (now deleted) versions; but for the most, I've always been able to resolve the issues.

 

As I approach the end, I need to make sure I resolve those issues in the most efficient ways possible.

 

MotionPathHelper is critical at this point, but it has suddenly stopped working altogether. 

 

Now I have run into a completely new and confounding issue - the "wire" that appears when I open up MotionPath Helper does not respond to my cursor, as if it's frozen.  I thought perhaps it was a resource issue, but I have the same problem after I comment out most of my code. I had registered a lot of plugins. This morning, I deleted the ones I do not need. But the problem persists.

 

I have been through the docs, read the questions, and watched the videos. It's been a while, so I plan to spend the morning reviewing the docs and videos again. I have a feeling I have missied something obvious to a keen eye. Though  I am newbie, I spend hours everyday teaching GSAP to myself.

 

That's not easy. I mention it because part of my problem is likely information overload on my end. I see a lot of successful models. I try to emulate on Codepen, but I am clearly not emulating them well enough. It looks so easy. I've used it successfully in the past, but not now.

 

Please see the link below. Please note: I ran into problem pasting the link in the body of this response. It produced two-three copies of the pen. I moved it to the field above. Sorry. I am new to this platform.

 

If someone can review the Codepen site (linked below) for any obvious red flags or reasons why it freezes on me, I would greatly appreciate it.

 

The community here is awesome. Thanks you for your continued assistance. I just  checked for errors in my console. Because MPH has never ceased to function on me, and worked well in the past, I did not expect to see any error messages. Though I have not deleted either MotionPathPlugin or MotionPathHelper, I received this message in my console when I checked this morning:

 

"Invalid property" "endAtStart" "set to" false "Missing plugin? gsap.registerPlugin("

 

It seems like a separate issue from this question, but I thought I should include it, just in case.

 

EndAtStart seems to work fine.

 

Robert

 

I have no idea why the Pen appears twice.

 

 

See the Pen ByyBEzm by robertpfaff (@robertpfaff) on CodePen.

[Robert Pfaff]

Note: I am just realizing now that, despite all the HTML being inside an SVG element with display: flex, justify and aligned content all centered in the parent containers, the path appears on the left edge of the screen(?). That makes no sense to me, and I wondering, what is going on and is it part of the problem?

 

The MotionPathHelper has worked for me in the past. I don't know if I've done something wrong to disable it.

 

That's a long shot, but no scenario goes untested at this point. After researching examples/demos on Codepen where the MotionPathHelper works, I changed the id for the svg element that contains #motion path and #dot information,  to "#splash_paths". Then, I moved the css information from inline to the css stylesheet, trying to find some way to center it all. To make the motion path available for editing. The problem persists and I am STUCK.

 

I don't know if this info is relevent, but I thought I should leave a note.

[Rodrigo]

Hi,

 

From a quick inspection you're passing this in a tween:

tl.to("#dot", 5, {
  immediateRender: true,
  motionPath: {
    path: "#splash_paths",
    align: "#dot",
    alignOrigin: [0.5, 0.5],
    ease: "myBounce",
    endAtStart: false
  }
}).

Then your HTML has this:

<path id="splash_paths", d=""/>

Basically that path has an empty string as a d attribute so the MotionPath Plugin and Helper are complaining that you're not giving them the appropriate data to work with, once you pass a valid path to the d attribute it works as expected.

 

Hopefully this helps

Happy Tweening!

[Robert Pfaff]

You probably looked at it when I was working on the data because the motion path data has been there or in the path field after motionPath all day long. I've been working on it since early this morning.  Sometimes, I've tried to produce the path data in older drafts of the same project with limited success. Maybe I left the splash_data field empty because I was (trying to) prepare path data elsewhere. But I really need MotionPathHelper to create a path in the present project, as it should. It will create the starter path, but I can't touch it, like it's frozen.

 

And I still have no clue why.

 

Thanks for checking it out.  I can't put good path data in the HTML until I'm able to make MotionPathHelper function as it should. The absence of data should not cause the problem I am having since the purpose of the MotionPathHelper is to create that data. The first part does not require motion path data to function.

 

I just put some "bad" dummy path data in there, but it came from an earlier draft. Sorry about that. Bad timing on my part. I am especially baffled at how the "dummy" motion path data will appear at the left-hand side of the screen, where every svg container is display:flex with items justified and aligned in the center. It's driving me nuts.

[Rodrigo]

Hi,

 

No problemo!

 

Also I noted this on your code:

tl.to("#dot", 5, {
  immediateRender: true,
  motionPath: {
    path: "#splash_paths",
    align: "#dot",
    alignOrigin: [0.5, 0.5],
    ease: "myBounce",
    endAtStart: false
  }
})
  .to("#dot", 1, {
  // ...
});

tl.to("#dot", 1, {
  immediateRender: true,
  motionPath: {
    path: [
      { x: 210, y: 390 },
      { x: 100, y: 480 }
    ],
    ease: "myBounce",
    yoyo: false,
    align: "#dot",
    alignOrigin: [0.5, 0.5]
  }
})
  .to("#dot", 0.8, {
  // ...
});

tl.to("#dot", 1, {
  immediateRender: true,
  motionPath: {
    path: [
      { x: -100, y: 750 },
      { x: 80, y: 775 },
      { x: 100, y: 750 }
    ],
    ease: "myBounce",
    yoyo: false,
    align: "#dot",
    alignOrigin: [0.5, 0.5]
  }
})
  .to("#dot", 0.8, {
  // ...
});

First you have both ease and yoyo inside the MotionPath config object, those go in the Tween config object:

tl.to(target, {
  ease: "myEase",
  yoyo: true,
  motionPath: {
    // Motion Path config here
  }
});

Also yoyo is false by default and it only works when you have a repeat value of 1 or more. If your Tween is not repeating there is no use for the yoyo config there.

 

Another issue is that you're trying to align the item to itself:

tl.to("#dot", 5, {
  immediateRender: true,
  motionPath: {
    path: "#splash_paths",
    align: "#dot",
    alignOrigin: [0.5, 0.5],
    ease: "myBounce",
    endAtStart: false
  }
})

You have the target of the Tween #dot, you're giving the MotionPath Plugin a path to animate it through #splash_paths but you're telling the plugin to align the item to itself. Normally you tell MotionPath to align the target to the same path you're passing:

tl.to("#dot", 5, {
  immediateRender: true,
  motionPath: {
    path: "#splash_paths",
    align: "#splash_paths", // Align to the same path being animated
    alignOrigin: [0.5, 0.5],
    ease: "myBounce",
    endAtStart: false
  }
})

That is especially problematic since the element being animated is not really a path, is a <circle> element, so the MotionPath Plugin can't really use it to align anything. For that you need a <path> element.

 

Hopefully this clear things up.

Happy Tweening!

[Robert Pfaff]

This is awesome. I clears up a lot. I hope it solves the problem. Thank you so much for a thorough response. 

 

I don't understand how my paths could be malformed  unless putting them inside a separate SVG container mafe them "malformed".

 

I swear I have delved into the docs, and watched the videos more than once; but I do have a neurological injury with meds that afffect memory;  so my apologies for not absorbing some of the important details. It's embarrassing when you've put in this much effort into a project. I wrote a long response, but it's mostly to confirm my new understanding of these important details.

 

I did listen (again) to the video and he says something about, "you don't have to have an svg element", which brought up another question that has bugged me. Do I need to frame all the path data in a NEW svg element?

 

Right now, they're framed inside the same SVG element as all the other path data (splash_svg)?

 

They are not inside a separate SVG element, but the same one as all other paths and SVG attributes.

 

My apologies for the length. I need to confirm the lessons learned here for future reference.

 

(Plus, I can tell I'm getting sloppy from fatigue and info overload).

First you have both ease and yoyo inside the MotionPath config object, those go in the Tween config object:

Also yoyo is false by default and it only works when you have a repeat value of 1 or more. If your Tween is not repeating there is no use for the yoyo config there.

To validate my grasp, the values for the motionpath config object must be the ID value inside the motionpath brackets, and the tween config object must be the values that come after. I often thought I could delete yoyo altogether, but wanted to be thorough. Plus, YIran into some earlier problems with the stubborn persistence of the ball's desire to return to its original place.  So I just threw in everything that might stop it. I gather I should just remove all instances.

 

Another issue is that you're trying to align the item to itself: You have the target of the Tween #dot, you're giving the MotionPath Plugin a path to animate it through #splash_paths but you're telling the plugin to align the item to itself. Normally you tell MotionPath to align the target to the same path you're passing:

This is great. Yeah. This one became akward as I struggled with what to put there, though it made the most sense to use the "#name of the path id", assuming the motion path data resides  in the HTML inside a path with an ID. It's not so clear in the video or the docs. The docs state "path and align can point to the same element."

 

However, it then uses a bullet point list for a number of other options.

 

If I recall correctly, the video touches on the data he placed in the HTML at the start, but he does offer  alternatives like "self". It confused me.  In the future, I should place the motionpath data in the path object in the HTML with an id, referenced in the motionPath path field by the id name. Got it. It doses beg one follow-up question:

 

The object referenced in MotionPathHelper is always the affected element, correct? In this case, that element is "#dot".

 

Thanks again. I hope it means MotionPathHelper will function again.

 

It worked yesterday. I don't know the root of the issue.

 

 

 

[Robert Pfaff]

Suddenly, I am getting this error message in the console. It was not there before.

 

ERROR: malformed path: #path
MotionPathPlugin.min.js:10 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at _align (MotionPathPlugin.min.js:10:17914)
    at i.init (MotionPathPlugin.min.js:10:19501)
    at ac (gsap.min.js:10:31419)
    at i.init (gsap.min.js:10:68161)
    at _initTween (gsap.min.js:10:34614)
    at Ma (gsap.min.js:10:4555)
    at Tween.render (gsap.min.js:10:38132)
    at Timeline.render (gsap.min.js:10:26110)
    at Timeline.render (gsap.min.js:10:26110)
    at na (gsap.min.js:10:1918)

[Rodrigo]

1 hour ago, Robert Pfaff said:

Do I need to frame all the path data in a NEW svg element?

 

Right now, they're framed inside the same SVG element as all the other path data (splash_svg)?

 

They are not inside a separate SVG element, but the same one as all other paths and SVG attributes.

Right now your demo consists on a large number of SVG elements, so those paths are being used. If you also need the same path data for the MotionPath then by all means use them, no harm in that. Is worth mentioning that the MotionPath Plugin takes any SVG path data, so you can pass a string if the path is different from the ones drawn in your project, something like this:

const myPathData = "M9,100c0,0,18-41,49-65";

gsap.to(target, {
  duration: 4,
  motionPath: {
    // Not a path element inside an SVG tag, just a string
    path: myPathData,
    autoRotate: true,
    alignOrigin: [0.5, 0.5]
  },
});

You can add the data to your SVG element even if is not visible, no problem there. As long as you pass a valid d attribute data, everything should work as expected.

1 hour ago, Robert Pfaff said:

To validate my grasp, the values for the motionpath config object must be the ID value inside the motionpath brackets, and the tween config object must be the values that come after. I often thought I could delete yoyo altogether, but wanted to be thorough.

Yeah, basically you have different configurations for different plugins, those go inside of the Tween configuration object. This is a basic to() tween with a simple config object for duration and moving the element in the X axis:

gsap.to(".box", {
  x: 200,
  duration: 1,
});

As you can see just one set of curly brackets for the config object. In this demo you have a Tween but with an extra Plugin configuration:

gsap.to(".box", {
  duration: 2,
  ease: "none",
  // Extra config object specific for the MotionPath Plugin
  motionPath: {
    // config here
  },
});

That basically tells GSAP, tween this element for two seconds, with a linear ease and use this configuration for the MotionPath Plugin. You can add more if you want/need:

gsap.to(".box", {
  duration: 2,
  ease: "none",
  // Extra config object specific for the MotionPath Plugin
  motionPath: {
    // config here
  },
  // Extra config object specific for the MorphSVG Plugin
  morphSVG: {
    // config here
  },
  // Extra config object for ScrollTrigger
  scrollTrigger: {
    // Config here
  },
});

With that you can have an element that moves through a path, is morphed and everything is tied to the scroll position, because you're telling GSAP "Use this Plugins this way I'm specifying in these config objects".

 

1 hour ago, Robert Pfaff said:

This one became akward as I struggled with what to put there, though it made the most sense to use the "#name of the path id", assuming the motion path data resides  in the HTML inside a path with an ID. It's not so clear in the video or the docs. The docs state "path and align can point to the same element."

Yeah in some cases the path and align properties can point to the same element, especially if you want your element to move along an SVG path that is actually rendered, but is not 100% needed though. Check this simple demo:

See the Pen KwwXoeY by GreenSock (@GreenSock) on CodePen.

 

The blue square uses the same path for the motion but since is not aligned with the path it doesn't go through the path. The green box is aligned with the path and goes through it. Does that clear things?

1 hour ago, Robert Pfaff said:

The object referenced in MotionPathHelper is always the affected element, correct? In this case, that element is "#dot".

Correctomundo! Although I wouldn't recommend using a Tween with MotionPath and create a MotionPath Helper instance on the same target, since the MotionPath Helper creates a GSAP Tween that leverages the MotionPath Plugin to create the motion. Keep in mind that the MotionPath Helper is just a tool in order to get the path exactly as you want it to use it with the MotionPath Plugin, I wouldn't use it in production unless you actually want/need for your users to modify the path used by the element.

 

Finally it seems like you want to move the dot through the letters, right? That means you already have clarity on the path you want to use for the dot motion, so there is no real use for the MotionPath Helper in that particular case, unless I'm getting this completely wrong. In that case just pass that path to the Tween and that should do it.

 

Hopefully this helps

Happy Tweening!

[Rodrigo]

43 minutes ago, Robert Pfaff said:

Suddenly, I am getting this error message in the console. It was not there before.

 

ERROR: malformed path: #path
MotionPathPlugin.min.js:10 Uncaught TypeError: Cannot read properties of undefined (reading '0')
    at _align (MotionPathPlugin.min.js:10:17914)
    at i.init (MotionPathPlugin.min.js:10:19501)
    at ac (gsap.min.js:10:31419)
    at i.init (gsap.min.js:10:68161)
    at _initTween (gsap.min.js:10:34614)
    at Ma (gsap.min.js:10:4555)
    at Tween.render (gsap.min.js:10:38132)
    at Timeline.render (gsap.min.js:10:26110)
    at Timeline.render (gsap.min.js:10:26110)
    at na (gsap.min.js:10:1918)

Your demo is working as expected, you only have a couple of syntax errors here:

MotionPathHelper.create.("#dots", 
  ) 

You have an extra dot and comma, nothing more and the id should be dot and not dots. It should be like this:

MotionPathHelper.create("#dot");

But as mentioned in my previous post this is going to create conflicting tweens, since you have one that is moving the dot in the Y axis and another created by the MotionPath Helper that will affect the Y property as well.

 

I forked your demo and kept it as simple as possible and this is what I ended up with:

See the Pen YPPrLGv by GreenSock (@GreenSock) on CodePen.

 

Note that I made the splash_paths visible, I should've added from the beginning that that's why you couldn't play around with the MotionPath helper 😅

 

Finally you also created this thread as well, which seems related to this:

Do you mind if we focus our attention to this one, unless they are indeed different and point to different issues, but IMHO they all seem quite entwined. Let me know.

 

Happy Tweening!