MotionPath plugin problem

[kikedao]

Hi!

 

I'm trying to use MotionPath with a custom javascript object to animate it in a 2D Canvas.

gsap.to(this.indicator, {
  motionPath: {
    path: [{x:0, y:0}, {x:20, y:0}, {x:30, y:50}, {x:50, y:50}],
    type: "cubic"
  },
  duration: 5,
});

 

I've done that many times in the past with no problem but now I'm getting this error, which thrown every frame:

Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.
    at _parseTransform2 (gsap.js?v=e483ba29:3750:93)
    at _get2 (gsap.js?v=e483ba29:3476:13)
    at Object._saveStyle2 [as save] (gsap.js?v=e483ba29:3236:61)
    at gsap.js?v=e483ba29:3240:28
    at Array.forEach (<anonymous>)
    at Object._saveStyle2 [as save] (gsap.js?v=e483ba29:3239:52)
    at gsap.js?v=e483ba29:3295:18
    at Array.forEach (<anonymous>)
    at _getStyleSaver2 (gsap.js?v=e483ba29:3294:39)
    at Plugin.init (gsap_MotionPathPlugin.js?v=e483ba29:1179:37)

It seems to me it's trying to treat my js object as an HTML element belonging to the DOM, which is not.

I'm using latest gsap version 3.12.5.

May it be a regression on the MotionPath plugin? Or maybe I'm doing something wrong? All the other 'normal' tweens/timelines I'm using are working fine.

Any help would be greatly appreciated, thanks in advance!

[GSAP Helper]

Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

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

that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅

[kikedao]

Thanks a lot for you super quick answer, at first I thought it would be very hard to reproduce in codepen but I managed to do it and find the problem!

So here is a super simplified version of what I try to do and it works:

See the Pen OJGLRYQ by Quique-Mar-n-Richelet (@Quique-Mar-n-Richelet) on CodePen

As you see I just tween an object which is defined as {x: 0, y: 0}and that works perfectly.

But then I had an idea... my custom objects have a 'style' property... could that be creating the problem?
Well, I just define the tweened object as {x: 0, y: 0, style: {} } and I get the original error!:

See the Pen xxeKRGV by Quique-Mar-n-Richelet (@Quique-Mar-n-Richelet) on CodePen

It seems that's the problem with MotionPath plugin, it checks for 'style' property to exist in the target object to try to infer if it's an HTML object.
Could I bypass that somehow? Do you think this problem is worth for you to modify the MotionPath plugin so it does this check in a different/safer way (maybe checking something else too, as I think it can be fairly common for a custom js object to have a 'style' property even if it's not a native HTML element)?

Thanks a lot in advance for your help  

[Rodrigo]

Hi @kikedao and welcome to the GSAP Forums!

 

There must be something wrong in your setup somewhere because this is working as expected:

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

 

Unfortunately in your demo you're just showing the dummy object tween and that's not enough to get a clear idea of what the problem could be.

 

Hopefully this helps.

Happy Tweening!

[kikedao]

You can see I posted two codepens, the first one works correctly and the second one throws the error.

The only difference between the two is that in the one that crashes the tweened object has a 'style' property.

 

So @Rodrigo if I do the same with the codepen from your last post, it crashes too:

See the Pen QWPLMzB by Quique-Mar-n-Richelet (@Quique-Mar-n-Richelet) on CodePen

 

As I mentioned in my previous post it seems the fact that the target object has an existing 'style' property makes MotionPath to treat the object as a native HTML element which is not and causes the error and it not working.

[Rodrigo]

Yeah the whole point of my demo is that the style property is not needed since it collides with the style property of a regular DOM node.

 

Any particular reason for that? There is no way you can remove it?

 

Happy Tweening!

[kikedao]

I can't remove it, we use a custom canvas 2D library, somewhat similar to EaselJs, and all display objects have this style property that is needed by the whole engine (I can't just set it to undefined either).

The only solution I can think of is that the check you make in MotionPath to try to know if it's a regular DOM node relies is something more specific and not just the existence of the 'style' property (maybe check a sub property of the style object that is super DOM specific).

Also I'm a bit worried that if this happens in MotionPath it may be happening too 'silently' in others parts of the core and maybe degrading performance as simple objects may be treated as DOM nodes and further calculations and style parsing be made, but I'm not sure about that.
 

[kikedao]

Maybe a property in the tween config object to assert it is NOT a DOM node instead of inferring it from it's properties would be another good workaround for anyone facing this issue when tweening custom javascript objects.
Something like:
 

gsap.to(obj, {duration: 1, x: 100, isDOM: false})

 

[GreenSock]

Yeah, that'd only happen if you've got a "style" property on the targets and the properties that you're animating are transform-related (like x, y, etc.). I've made a tweak to the core that should resolve that. You can preview it here: 

https://assets.codepen.io/16327/gsap-latest-beta.min.js (you might need to clear your cache)

 

Better? 

[kikedao]

Hi @GreenSock Jack!

I tried it in my previous codepen and to no one's surprise it works perfectly 🙂.

But I can't test it in my project in a more real-life scenario as I'm using the package version with vite for building and I can't replace the gsap-core.js file (the one that vite seems to be using to generate it's deps bundles) with this beta minified version.

If you have a link with the beta un-minified version I can try it and give you feedback, otherwise we can call it a win and I will wait for the next release incorporating the tweak to try it.

[GreenSock]

Do you want a .tgz file maybe? That way, you can just drop it into your project directory and "npm install" that tgz file(?) 

[kikedao]

Sure, I can try that. Whatever works best for you.

[GreenSock]

Great. I sent you a link. 

[kikedao]

I tested it and works perfectly in my project 👍

Any ETA for it to be included in a normal release?

[GreenSock]

Glad it works well for you. Sorry, I can't provide an ETA at this point, but feel free to use that beta file as much as you'd like. 

[kikedao]

Perfect, thanks a lot for all your help!