Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

MotionPathHelper / Dragable combo help please

Recommended Posts

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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

Link to post
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.