GSAP SVG: draw, morph, motion path

When to use this

• You need a stroke to appear as if being hand-drawn (icon reveals, signature animations, chart line reveals): DrawSVGPlugin.
• You need one SVG shape to smoothly deform into a different shape (icon state changes, blob animations, path-to-path transitions) even when the two paths have different point counts: MorphSVGPlugin.
• You need an element (DOM or SVG) to travel along an arbitrary curved path with correct rotation/orientation: MotionPathPlugin.
• You're combining these (e.g. draw a path, then have a dot travel along it) inside a shared timeline.
• Do NOT use this for simple straight-line or curve translation between two points; a plain gsap.to(el, { x, y }) in gsap-core-timelines is lighter and correct for that. Do NOT use MorphSVGPlugin for layout/DOM position changes; that is gsap-flip-layout.

Mental model

DrawSVGPlugin works by manipulating stroke-dasharray and stroke-dashoffset on an SVG shape with a stroke (path, line, circle, polyline, rect). Setting stroke-dasharray to the shape's total path length and animating stroke-dashoffset from that full length down to zero reveals the stroke progressively, because the "dash" pattern is set to exactly one dash the length of the whole path with an equally long gap, and offsetting it slides the visible portion along. DrawSVGPlugin computes the actual path length for you (getTotalLength() equivalent) and exposes a simple drawSVG value like '0% 100%' (percent range currently visible) so you do not hand-compute dash math. This only affects the STROKE, not fill; a filled shape with a stroke reveal will show its full fill immediately while the outline draws.

MorphSVGPlugin interpolates the d attribute of one <path> into another (or into a different shape type's equivalent path data) frame by frame. The hard problem it solves is that two arbitrary paths rarely have the same number of points/segments or the same winding, so naive point-by-point interpolation produces garbled in-between shapes. MorphSVGPlugin's algorithm resamples and maps points between the two shapes to minimize distortion (there is also a type: 'rotational' mode specifically tuned for shapes that should rotate into each other, like a star morphing into a spiral, rather than translate-morph). You give it a start path and end path (as selectors, path data strings, or even a non-path shape like <circle>/<rect> which it converts to path data internally), and it produces the tweened d string values.

MotionPathPlugin decouples "where is a point along this path at progress T" from "what is currently visible." It reads a path's geometry, and for any given progress value (0 to 1) returns the x/y coordinate and tangent angle at that point. When applied to gsap.to(target, { motionPath: {...} }), GSAP drives your target's x/y (transform-based, so it works on both DOM elements and SVG elements) using this, and can optionally also rotate the target to match the path's local tangent (autoRotate: true), which is what makes a car icon correctly point into curves instead of staying at a fixed rotation while translating along a curved road path.

All three are GSAP plugins that hook into the tween value-resolution system the same way core properties do, meaning they compose normally with the position parameter, stagger, and timelines from gsap-core-timelines.