__smm_static_temp_content__

Constructor Config

The FollowPath constructor accepts a single configuration object with the following properties:

Required

element

Type: HTMLElement

The DOM element to animate along the path.

duration

Type: number (ms)

Total duration of the animation across all iterations.

path

Type: SVGPathElement | SVGPolylineElement

The SVG path or polyline element defining the trajectory.

iterations

Type: number

Number of times the element traverses the path. Can be a floating point for partial traversal, or Infinity for infinite looping (callback will never fire).

Optional

delay

Type: number (ms)

Delay between each iteration before the next one starts.

toScale

Type: boolean

When true, compensates for differences between the SVG's internal coordinate system and the rendered bounding box, keeping the animation aligned with the visual path.

rotate

Type: boolean

When true, the element is automatically rotated to follow the path's tangent direction.

callback

Type: () => void

Function called once after all iterations complete. Not called if animation is stopped via .stop() or interrupted.

easing

Type: (t: number) => number

A function that maps progress t (0 to 1) to a eased value. Defaults to linear (t) => t.

easing(t) {
  return t * t; // ease-in
}

timeline

Type: { [key: ${number}%]: () => void }

An object whose keys are percentage strings (e.g. '50%') and values are callbacks fired when the animation reaches that point.

mode

Type: 'pingpong' | 'loop' | 'clamp' | ((t: number) => number)

Defines behavior when the animation exceeds the path length:

• 'clamp' — holds at the end position (default)
• 'loop' — wraps around to the start
• 'pingpong' — reverses direction each iteration
• Custom function — maps exceeded progress values manually