The MotionPathHelper utility is a GreenSock club members only utility that lets you DRAW your own path interactively in the browser. Starting with any SVG curve, you can click and edit the curve in a visual way. This allows for easier tweaking of curves.

To use the MotionPathHelper, simply use its .create() method with a reference to any element that has a MotionPath. For example:

gsap.to("#rect", { motionPath: "#path", duration: 5 });
MotionPathHelper.create("#rect")

Once this is done, you should be able to see the curve and be able to interact with it in the following ways:

• Click and drag on the path itself to move the path.
• Click on the points of the line to show their handles.
• Click and drag on the points to move the points.
• Click and drag on handles to edit how the path curves.
• Hold Alt and click on the path to add points.
• Hold Alt and click on a point to toggle it between being "smooth" or a corner.
• Hold Shift and click on a point to toggle a point's selection.
• Click Delete with an anchor selected to delete it.
• Click the “Copy motion path” button to copy the SVG path data to your clipboard.
• Hold Ctrl and press Z to undo your last action.