Trim Path

Last updated last month

The Trim Path feature allows you to draw only a portion of the stroke on a vector shape. This can be used to create a variety of animations where a line needs to follow a path.

Find example files tagged with #TrimPaths.

Animated Trim Paths example

Enable Trim Path

Select a shape that has a stroke and use the Trim Path dropdown to select either Sequential mode or Synced mode. These both enable the Trim Path feature, but behave differently when there are multiple paths on one shape. If the shape only has one path, then there is no difference between Sequential mode or Synced mode.

Sequential

Sequential mode animates the trim path along each path sequentially.

The order in which the paths animate can be changed by dragging and dropping the paths in the Hierarchy under the shape layer.

Sequential Trim Paths

Synced

Synced mode animates the trim path along all paths concurrently.

Synced Trim Paths

Start and End

The trim of a stroke happens from a Start point to an End point. By default, all shapes have a Stroke that starts at 0% and ends at 100%. Change these values to modify the position of the Start and End points of the trim (which are represented by a percentage of the full length of the path).

Trim Path Start and End

Offset

Use Offset to easily move the trimmed portion of the path.

Trim Path Offset