Jump to content

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:

  1. gsap.to("#rect", { motionPath: "#path", duration: 5 });
  2. 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.
Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.