Animate strokes with path trim

Path trim lets you create animated strokes by controlling how much of a vector path is visible at any point in time. You can use path trim to create draw-on or erase effects, handwriting animations, and looping spinners.

There are two ways to apply a path trim animation:

• The path preset animation
• Path trim keyframes

Use the path preset animation

You can use the path preset animation to quickly apply a path trim animation to a stroke.

To apply a path preset animation:

1. In Figma Motion, select the open vector path you want to animate.
2. Click Animations in the Animations section of the right sidebar.
3. Choose Path from the list of preset animations. If the Path option is disabled, make sure you’ve selected an open vector path with a center-positioned stroke.
4. Use the settings to configure the animation.

Use path trim keyframes

Path trim keyframes let you animate the start and end points of a path independently, giving you precise control over the motion. For example, you can use keyframes to create a loading spinner with staggered start and end points for more fluid, organic movement. Path trim keyframes can be applied to both open and closed vector paths.

To apply path trim keyframes:

1. In Figma Motion, select the vector path you want to animate.
2. Click Add keyframe next to Path trim start or Path trim end in the Stroke section of the right sidebar to set your starting keyframe.
3. Enter a value between 0% and 100% to set the point on the path where the trim begins or ends.
4. Move the playhead to where you want the animation to end, then adjust the Path trim start or Path trim end value to add another keyframe that defines the final state of the path.