Open the editor

Home/Help/Animate/Trim path

ANIMATE

Trim path

Trim path shows only part of a stroke: from Start to End, in percent of its length, moved along it by Offset. Animate End from 0% to 100% and the line draws itself on.

The trail draws itself across the hills in two seconds, stays for a second, and starts over.
WHAT YOU’LL MAKE

The trail draws itself across the hills in two seconds, stays for a second, and starts over. This one is the real exported SVG, playing.

Do it in the editor: guided tour6 steps · about 3 minutes · opens a practice scene

Step by step

  1. Select the trail

    Click the yellow line, or its row in the Layers panel.

  2. Set End to 0

    In the inspector's Appearance section, under Trim path, type 0 in End and press Enter. The line disappears: none of it is shown.

  3. Start an End track

    Click beside End. End gets its own row on the timeline, Trim end, with a keyframe of 0% at the start.

  4. Move the playhead to 2s

    Drag the red playhead along the time ruler to 2s.

  5. Set End to 100

    Type 100 in End and press Enter. A second keyframe lands at 2s, and the whole line shows again.

  6. Play it

    Press Space. The line draws itself on from its first node to its last.

Good to know. Animate Start the same way to erase the line from its beginning, or keep a short Start-to-End piece and animate Offset to send it along the path. The Strokes presets (Draw on, Erase, Travel…) write these keyframes for you.

Keys

Shift DAdd a trim end (draw on) keyframe at the playhead
SpacePlay and pause