PathTransition

The PathTransition plugin makes it easy to animate elements along complex paths. It can follow SVG curves or a list of coordinates, and can even rotate your element automatically so it always faces the direction it's moving.

---

1. SVG Path Following

To animate along a path, just give AnimX the ID of an SVG <path>. The engine handles all the complex math behind the scenes.

✈️

60 FPS

If you turn on autoRotate: true, AnimX will calculate the exact angle of the curve at every frame and rotate your element to match.

AnimX.animate('.airplane', {
  duration: 4,
  pathTransition: {
    path: '#flight-path',
    autoRotate: true,
    alignOrigin: [0.5, 0.5] // Ensures the center of the ✈️ traces the line
  }
})

---

2. Array Waypoints

If you don't have an SVG path, you can just provide a list of {x, y} points. AnimX will move the element in straight lines from point to point.

60 FPS

AnimX.animate('.dot', {
  duration: 2,
  pathTransition: [
    {x: 0, y: 0},
    {x: 150, y: -50},
    {x: 200, y: 50},
    {x: 0, y: 0} // Return to start
  ]
})

---

API Reference

Configuration Object

When passing a configuration object to pathTransition: {}, you have access to the following options:

Property	Type	Default	Description
path	string|Element|Array	null	The path to trace. Can be a CSS selector to an SVG <path>, the element itself, or an array of {x,y} points.
autoRotate	boolean|number	false	If true, automatically rotates the element to face the direction of travel. Pass a number (e.g. 90) to add a fixed degree offset.
start	number	0	The percentage (0.0 to 1.0) along the path to begin the animation.
end	number	1	The percentage (0.0 to 1.0) along the path to end the animation.
alignOrigin	Array	[0, 0]	Automatically sets the element's transform-origin as percentages ([0.5, 0.5] = 50% 50%). Ensures the center of the element traces the line, rather than its top-left corner.
offsetX	number	0	Shifts the element left or right by this many pixels from the path.
offsetY	number	0	Shifts the element up or down by this many pixels from the path.

Standalone Class Mode

If you need more control, you can create a PathTransition directly instead of using .animate(). This gives you an object you can easily pause, play, or skip around.

import { PathTransition } from 'animx/path-transition'

const motion = PathTransition.create('.car', {
  path: '#racetrack',
  duration: 3,
  autoRotate: true,
  onUpdate: ({ progress, x, y, angle }) => {
    console.log(`Car is at \${x},\${y} facing \${angle}deg`)
  }
})

motion.seek(0.5) // Jump to halfway around the track