Figma Motion basics: Path trim

By Figma

Categories: Design, Product

Summary

Path Trim in Figma Motion enables animated line effects through two approaches: quick Path animation styles for open paths, or keyframe-based trimming for precise control over closed paths. Creators can build draw-on effects, handwriting animations, and loading spinners by controlling start/end points independently with 0-100% values.

Key Takeaways

  1. Path Trim animations only work on center position strokes—misaligned stroke settings will disable the Path animation option entirely, making proper stroke configuration critical before applying animations.
  2. Two distinct workflows exist: Path animation styles for quick implementation on open paths (one per object), versus keyframe-based Path Trim Start/End for granular control and closed path support with independent start/end point animation.
  3. Keyframe-based Path Trim enables staggered start and end points for fluid, organic loading spinner effects—move the playhead and adjust 0-100% values to create natural motion beyond simple linear animations.
  4. Path Trim supports three primary use cases: draw-on effects, erase animations, handwriting sequences, and looping spinners—each leveraging different keyframe configurations and animation directions for distinct visual outcomes.
  5. Open vector paths are required for Path animation styles, but keyframes work on both open and closed paths, giving designers flexibility to choose their complexity level based on animation needs and path geometry.

Related topics

Transcript Excerpt

[soft upbeat music] Let's learn about Path Trim. Path Trim lets you create animated lines by controlling how much of a path is visible at specific points in time. You can use Path Trim to create draw-on or erase effects, handwriting animations, and looping spinners. Path Trim animations can only be applied to center position strokes. There are 2 ways to create Path Trim animations in Figma Motion, the Path animation style and Path Trim keyframes. Let's take a look at each option. The Path animation style lets you quickly apply Path Trim animations without needing to set keyframes manually. Path animation styles can only be applied to open vector paths, and you can only apply one path animation per object. To apply a Path animation style, click Animations in the right sidebar and choose Pat…

More from Figma