How do you animate a line drawing on?

Add Trim Paths to a stroked shape and keyframe End from 0% to 100%. The stroke appears along the path as End rises.

What do Start, End and Offset do in trim paths?

Start and End set which part of the path is visible, as percentages of its length. Offset slides that visible part along the path, which is how a short segment chases around a shape.

Does trim paths work in Lottie?

Trim paths is part of the Lottie format, and in Premation it survives Lottie export along with the other vector shapes and transform tracks.

Glossary

Trim paths

Name: Premation
Author: Premation

A shape operator that reveals only part of a stroke, from a start to an end percentage. Animating End draws a line on; animating Offset chases a dash along it.

Also called trim path, write-on effect, line draw-on.

In After Effects

In After Effects, Trim Paths is added from a shape layer's Add menu, beside Contents in the timeline. It has Start, End and Offset properties, plus a Trim Multiple Shapes option (Simultaneously or Individually) for layers with several paths.

In Premation

The Shape folder of the Effects panel, with a shape layer selected. Works with tapered strokes and animated dashes, and survives Lottie export.

Step by step

Select a shape layer with a stroke: draw one with the pen or shape tools, or import an SVG.
Open the Shape folder of the Effects panel and add Trim Paths. Its controls appear in Effect Controls (F3) and the Properties panel.
For a write-on, keyframe End from 0% to 100%.
For a chase, set Start to 0% and End to 20%, then keyframe Offset from 0% to 100%.
Ease the End keyframes, for example with Easy Ease (F9), so the line accelerates and settles instead of moving at constant speed.
Drag Trim Paths above or below Wiggle Paths or other operators to change the result; each operator works on what the one before it produced.

Tips

The path's direction decides where the line starts. To draw from the other end, use Layer ▸ Mask and Shape Path ▸ Reverse Path Direction rather than swapping the keyframes.
A tapered stroke gives a draw-on a pen-like feel, and taper composes with dashes.
A layer takes one Trim Paths. When parts of a drawing need different timing, put them on separate shape layers and stagger them.

Walkthrough: Animate a logo from its SVG

Read the docs: Shape operators

Questions

How do you animate a line drawing on?: Add Trim Paths to a stroked shape and keyframe End from 0% to 100%. The stroke appears along the path as End rises.
What do Start, End and Offset do in trim paths?: Start and End set which part of the path is visible, as percentages of its length. Offset slides that visible part along the path, which is how a short segment chases around a shape.
Does trim paths work in Lottie?: Trim paths is part of the Lottie format, and in Premation it survives Lottie export along with the other vector shapes and transform tracks.

Related terms

Keep exploring

Try it in PremationFree · AGPL-3.0-only · macOS & Windows