Trim Path
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.
Animated Trim Paths example
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 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 mode animates the trim path along all paths concurrently.
Synced Trim Paths
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
Use Offset to easily move the trimmed portion of the path.
Trim Path Offset
Last modified 4yr ago