MotionPathHelper error in Canvas

[InchinnGuy]

Hi 
Am trying to get the new MotionPathHelper plugin to work within a canvas when animating a sprite placed on the stage
using the Pixi.js Renderer.CreateSprite method  but get this error whenever I attempt to use it:

Javascript error: Uncaught TypeError: t.getBoundingClientRect is not a function on line 10 for ......../MotionPathHelper.min.js

If Anyone have any ideas it would be much appreciated.

Here is my code:

gsap.to(this.ButtonSprite, { motionPath:{path:[{x:100, y:100}, {x:300, y:-100}, {x:-300, y:0}]},duration: 2, delay:1.5, onUpdate:UpdateStage});

MotionPathHelper.create( this.ButtonSprite );

 

[GreenSock]

MotionPathHelper only works with DOM elements, but it looks like you're trying to use it with a canvas library. Do you have a reduced test case, perhaps in codepen, that we can see? That'd help provide advice. 

[ZachSaucier]

Hey InchinnGuy and welcome to the GreenSock forums! Thanks for being a Club GreenSock member, we couldn't do what we do without people like you.

 

As Jack said, MotionPathHelper only works with DOM elements. However, depending on your use case you may be able to use MotionPathHelper on the <canvas> element itself or a container of it (using multiple canvases if needed).

[InchinnGuy]

Thanks Jack and Zach
Yes I have MotionPathPlugin working fine on <canvas>.
Pity the MotionPathHelper doesn't work in <canvas> as it looks a really useful tool.
Loving all the new GSAP3 stuff, cheers

[GreenSock]

@InchinnGuy you can totally use MotionPathHelper to create/finesse your motion paths - maybe just drop a <div> into the DOM and use that as a dummy object of sorts - it doesn't mean you actually have to use that <div> as the target of your real tweens later on. MotionPathHelper just needs something to animate along the path it's building in the browser. Once you've got your path built, copy it and paste it into your "real" tween(s). Does that help at all? 

 

If you still need some assistance, I'd strongly recommend creating a reduced test case in codepen or something and share it here so we can see what you're trying to do in context.