MotionPathHelper / Dragable combo help please

[Briggzee]

Hi everyone, I'd like to just start off by saying this GSAP is fantastic and this forum is a wealth of knowledge for an extremely noob "programmer" (I use that term very lightly lol) like myself!

 

I'm trying to have a dragable div, which will auto create a MotionPathHelper onclick of a button.
You can see in the pen that after dragging and when the path is created, it seems to add on the distance I've moved the element, previous to creating the path.

Is there a simple way to avoid that happening? Forgive me if it's obvious as I'm very new to programming.

See the Pen ZEWemdw by Briggzee (@Briggzee) on CodePen

[Briggzee]

After further inspection, I realise it's auto creating an empty invisible <svg> which seems to hold the MotionPathHelper generated path.

 

I'm still open to help of any kind, as I'm yet to solve how to stop the svg from being created upon the creation of the MotionPathHelper, or a better solution to create what I'm trying to achieve.

[ZachSaucier]

Hey Briggzee and welcome to the GreenSock forums. Thanks for the kind words and for supporting GreenSock with a Club membership!

 

It looks like you're mixing vars objects incorrectly. You should first create the MotionPath animation that you want to use then create a helper for it, like this:

See the Pen ZEWeZqY?editors=1000 by GreenSock (@GreenSock) on CodePen

 

Since you're aligning to self, I also recommend having the path be on the page before you create the helper (i.e. in the HTML if you can). That way it is positioned in a way that is editable since you want to have align: "self" to retain the position of the drag.

[Briggzee]

This helps me greatly Zach! Thank you very much! 😅