Briggzee Posted August 26, 2020 Share Posted August 26, 2020 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 Link to comment Share on other sites More sharing options...
Briggzee Posted August 26, 2020 Author Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
ZachSaucier Posted August 26, 2020 Share Posted August 26, 2020 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. Link to comment Share on other sites More sharing options...
Briggzee Posted August 26, 2020 Author Share Posted August 26, 2020 This helps me greatly Zach! Thank you very much! 😅 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now