MotionPathPlugin

You register the plugin once, then pass a motionPath object to any tween. The plugin reads the path, samples it into points, and drives the target's x and y along that curve from the start of the tween to the end. The four options you reach for most are path (the route), align (what to position the element against), alignOrigin (which point of the element rides the path), and autoRotate (turn to face travel direction).

The single most common confusion is align. Without it, the element follows the path's shape but stays anchored to wherever it already sits on the page, so the motion looks correct but lands in the wrong spot. Set align to the same path element and the plugin moves the target onto the path's coordinate space. Pair it with alignOrigin: [0.5, 0.5] so the element's center rides the line instead of its top-left corner.

You don't need an SVG at all. path also accepts an array of points, and curviness controls how tightly the plugin smooths the curve through them. curviness: 0 connects the points with straight segments, curviness: 2 rounds the corners hard.

• Moving an element along a curved or looping route (a marker tracing a map line, a dot orbiting a logo)
• Connector animations where something travels a non-straight line between two points
• Decorative objects that drift along a hand-drawn path rather than a straight tween
• Anything that should face the direction it moves (an arrow, a plane, a cursor follower) via autoRotate
• Pairing with ScrollTrigger scrub so the element walks the path as the user scrolls

• The move is a straight line, animate x and y directly. MotionPathPlugin is overhead you don't need for point-to-point
• You're drawing the path's stroke rather than moving along it, that's DrawSVGPlugin
• You're morphing one shape into another, that's MorphSVGPlugin
• The element should follow the live cursor instead of a fixed path, use gsap.quickTo on x and y
• You only need a CSS keyframe loop on a simple shape, native CSS offset-path covers basic cases without a JS dependency

MotionPathPlugin is the fixed-path member of a family Annnimate uses constantly: an element following a trajectory. The components below follow the live cursor path instead of a predefined SVG path, so they reach for gsap.quickTo rather than MotionPathPlugin, but the mental model is the same, a target chasing a route with lag and easing.

• Image Follow List moves a preview image along the cursor's trajectory with quickTo, with the image lagging behind the pointer. Swap that freeform route for a fixed #path and you have a MotionPathPlugin animation
• Image Trail drops a series of images along the path the cursor draws, the freeform cousin of seeding elements along a MotionPath