TrimPath

Animate visible portion of SVG path strokes with start, end, and offset controls

TrimPath provides After Effects-style path trimming for SVG animations. Control which portion of a path's stroke is visible by animating start, end, and offset values.

Overview

TrimPath works by manipulating stroke-dasharray and stroke-dashoffset to show only a portion of a path's stroke. This creates effects like:

Draw On - Path draws from nothing to fully visible
Draw Off - Path erases from visible to nothing
Spinning Loader - Visible segment rotates around path
Reveal from Center - Path reveals outward from middle

Basic Usage

TrimPath.to()

Animate to target trim values.

import { TrimPath } from 'faster-motion';

// Draw path from 0% to 100%
TrimPath.to('#my-path', {
  start: 0,
  end: 100,
  duration: 1000
});

Try it: Draw On

TrimPath.to('#wave', {
  start: 0,
  end: 100,
  duration: 1500,
  ease: 'easeInOut'
});

TrimPath.from()

Animate from specific values to current state.

// Path appears to draw in from end
TrimPath.from('#path', {
  start: 100,
  end: 100,
  duration: 1000
});

TrimPath.set()

Set trim values instantly without animation.

// Show only middle 50%
TrimPath.set('#path', {
  start: 25,
  end: 75
});

TrimPath.getState()

Get current trim state of an element.

const state = TrimPath.getState('#path');
console.log(state.start, state.end, state.offset);  // 0-1 values

Trim Values

start (0-100%)

Where the visible stroke begins. Default: 0.

TrimPath.set('#path', { start: 25 });  // Hide first 25%

end (0-100%)

Where the visible stroke ends. Default: 100.

TrimPath.set('#path', { end: 75 });  // Hide last 25%

offset (0-360°)

Rotates the visible region around the path. Useful for looping animations.

// Spin a short segment around the path
TrimPath.to('#loader', {
  start: 0,
  end: 25,
  offset: 360,
  duration: 1000,
  repeat: -1,
  ease: 'linear'
});

Common Effects

Draw On

Animate a path from invisible to fully visible.

TrimPath.to('#signature', {
  start: 0,
  end: 100,
  duration: 2000,
  ease: 'easeOut'
});

Try it: Multiple Effects

// Draw On
TrimPath.to('#path1', { start: 0, end: 100, duration: 1000 });

// Draw Off
TrimPath.to('#path2', { start: 100, end: 100, duration: 1000 });

// Reveal from Center
TrimPath.to('#path3', {
  start: 50, end: 50,  // Start collapsed at center
  duration: 0
});
TrimPath.to('#path3', {
  start: 0, end: 100,  // Expand outward
  duration: 1000
});

Draw Off

Animate a path from fully visible to invisible.

TrimPath.to('#path', {
  start: 100,
  end: 100,
  duration: 1000,
  ease: 'easeIn'
});

Spinning Loader

A visible segment that continuously rotates around the path.

Try it: Loading Spinner

TrimPath.to('#spinner-path', {
  start: 0,
  end: 25,       // Show 25% of path
  offset: 360,   // Rotate full circle
  duration: 1000,
  ease: 'linear',
  repeat: -1     // Infinite loop
});

Reveal from Center

Path reveals outward from its center point.

// Start collapsed at center
TrimPath.set('#path', { start: 50, end: 50 });

// Expand outward
TrimPath.to('#path', {
  start: 0,
  end: 100,
  duration: 1000,
  ease: 'easeOut'
});

Convenience Methods

reveal()

Shorthand for drawing a path from 0% to 100%.

TrimPath.reveal('#path', {
  duration: 1500,
  ease: 'power2.out'
});

// Equivalent to:
TrimPath.to('#path', { start: 0, end: 100, duration: 1500 });

erase()

Shorthand for hiding a path from 100% to 0%.

TrimPath.erase('#path', { duration: 1000 });

drawAndErase()

Combined animation that draws then erases.

const timeline = TrimPath.drawAndErase('#path', {
  drawDuration: 1000,
  eraseDuration: 800,
  holdDuration: 500,  // Pause between draw and erase
  ease: 'power2.inOut'
});

spin()

Continuous spinning effect for loaders.

TrimPath.spin('#loader', {
  segmentSize: 25,   // Visible portion (%)
  duration: 1000,
  ease: 'linear'
});

prepare()

Prepare an element for trim animation (sets initial stroke-dasharray).

TrimPath.prepare('#path');  // Call before animating

reset()

Reset element to original state (removes trim styling).

TrimPath.reset('#path');

Animation Options

Option	Type	Default	Description
`start`	`number \| string`	`0`	Start position (0-100 or "25%")
`end`	`number \| string`	`100`	End position (0-100 or "75%")
`offset`	`number \| string`	`0`	Rotation offset (degrees or %)
`duration`	`number`	`1000`	Animation duration in ms
`ease`	`string`	`'power2.inOut'`	Easing function
`delay`	`number`	`0`	Delay before starting
`repeat`	`number`	`0`	Repeat count (-1 for infinite)
`yoyo`	`boolean`	`false`	Reverse direction on repeat
`onStart`	`() => void`	-	Called when animation starts
`onUpdate`	`(state) => void`	-	Called each frame with current state
`onComplete`	`() => void`	-	Called when animation completes

Signature Animation Example

Try it: Signature Drawing

// Animate a signature path
TrimPath.to('#signature', {
  start: 0,
  end: 100,
  duration: 3000,
  ease: 'linear',
  onComplete: () => {
    console.log('Signature complete!');
  }
});

Shorthand Function

import { trimPath } from 'faster-motion';

// Shorthand for TrimPath.to()
trimPath('#path', { end: 100, duration: 1000 });

TypeScript Support

import { TrimPath, TrimPathOptions, TrimPathState } from 'faster-motion';

const options: TrimPathOptions = {
  start: 0,
  end: 100,
  duration: 1000,
  ease: 'easeOut',
  onUpdate: (state: TrimPathState) => {
    console.log(state.start, state.end, state.offset);
  }
};

TrimPath.to('#path', options);