Stroke animations
Trim, offset, taper, direction and presets for strokes, plus marching ants and layers that follow a path.
Any stroke on a vector path can animate how much of it is drawn. Open the border's details (the slider button next to the border width, “Dash, gap, caps, joins and draw-on”) to find the Draw section. Dashed borders on any shape can also flow.
Presets
Draw On (or Redo Draw On once a trim exists) and the presets menu next to it add a complete stroke animation from the playhead. The same presets are in the timeline's lane menu under Stroke Animation, for every selected layer at once.
| Preset | What it does | Works on |
|---|---|---|
| Draw On | Draws the stroke in: trim end 0 → 1, 0.8 s, ease-in-out | Vector paths |
| Draw Off | Erases it from the start: trim start 0 → 1, 0.8 s, ease-in-out | Vector paths |
| Write On | Handwriting: round caps and joins, a 1.2 s draw-on | Vector paths |
| Trace | A 25 % segment travels along the path, looping (trim offset, linear) | Vector paths |
| Pulse | One segment runs along the path once (the end leads, the start follows 0.3 s later) | Vector paths |
| Dash Flow | Dashes flow along the stroke and loop (dash offset, linear). Adds a dash if there is none | Any border |
Trim start, end and offset
| Field | Range | Default | Meaning |
|---|---|---|---|
| Start | 0–100 % | 0 % | Where the visible part begins |
| End | 0–100 % | 100 % | Where it ends. Animate from 0 to 100 % for a draw-on |
| Offset | Any; 100 % = one lap | 0 % | Shifts the visible part along the path. It wraps around closed paths |
Click ◆ next to a value to key it at the playhead and build your own draw-on. The diamond fills when a key sits at the playhead and lights up when the value is animated.
Paths, direction and taper
| Control | Options | What it does |
|---|---|---|
| Paths | One by One (default), Together | Shown for paths with several parts. One by One treats them as one continuous stroke, drawn one after another; Together trims every part at the same time |
| Stagger (with Together) | 0–100 %, steps of 5 | 0 % draws all parts together, 100 % strictly one after another |
| Direction | Reverse, From Centre | Reverse draws from the end toward the start; From Centre draws from the middle outward |
| Taper | Start and end, 0–100 %, steps of 5 | Narrows the stroke's start (tail) and end (head) to a point over that share of its length, for a brush-like draw-on |
Marching ants
- Give the border a dash in the details (Dash and gap, or a preset: Dash or Dot).
- Click Animate Dashes. The dashes travel along the stroke and loop seamlessly until the end of the scene.
- Tune the speed by keying
dashOffsetin the timeline. Restart Dash Loop rebuilds the loop after you change the dash.
Follow a path
A layer can travel along a path, for example a dot along a curve, and turn with it (auto-orient). Ask the AI: “let the plane follow the dashed path and rotate along it”. The progress along the path is a normal property (pathProgress, 0 to 1) you can key and ease in the timeline.
In exports
| Feature | Lottie | Web (HTML, CSS, React, Web Animations) | SwiftUI |
|---|---|---|---|
| Trim start, end, offset | Native Trim Paths | pathLength with dash arrays | .trim(from:to:), offsets split where they wrap |
| Reverse, From Centre, stagger | Split into groups, sampled | One stroke element per part (CSS: reverse and centre only) | Reverse and centre no; the path trims as one stroke |
| Taper | Uniform width | Uniform width | Uniform width |
| Dash flow | Animated dash offset | Animated stroke-dashoffset (not in CSS) | Static dashes at the first offset |
Works with
- Image trace: trace a logo, then draw it on.
- Gradients: a rotating gradient on a drawn ring.
Troubleshooting
| If this happens | Try this |
|---|---|
| Draw On is greyed out in the lane menu | The layer isn't a vector path. Trim works on paths; only Dash Flow works on any border. Convert shapes with ⇧⌘P. |
| The draw starts at the wrong end | Turn on Reverse, or use Stage → Reverse Path Direction. |