kikedao

Perfect, thanks a lot for all your help!

I tested it and works perfectly in my project 👍 Any ETA for it to be included in a normal release?

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

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.

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})

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.

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: https://codepen.io/Quique-Mar-n-Richelet/pen/QWPLMzB 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.

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: https://codepen.io/Quique-Mar-n-Richelet/pen/OJGLRYQ 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!: https://codepen.io/Quique-Mar-n-Richelet/pen/xxeKRGV 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

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!