Chapter 270: MotionPathPlugin (Overview)

Core Idea

Animates an element along an SVG path (or a plotted curve through raw points), automatically rotating it to follow the path's direction if desired.

Code Examples

gsap.registerPlugin(MotionPathPlugin);
gsap.to("#div", { motionPath: { path: "#path" }, transformOrigin: "50% 50%", duration: 5 });

Key Takeaways

1. The rest of this section is mostly low-level path-math utilities (coordinate conversion, matrix math, RawPath helpers) used internally and available for advanced custom path work.

Connects To

• DrawSVG: reveals a stroke rather than moving an element along it.
• anchorsToProgress (Helper): builds on this plugin's raw-path measurement APIs.