How to Animate Along Paths with CSS offset-path

The CSS offset-path property, part of the CSS Motion Path module, allows developers to animate DOM elements along complex, custom geometric trajectories such as curves, circles, or SVG paths. Traditionally, moving elements across non-linear trajectories required bulky JavaScript libraries or complex coordinate calculations. With offset-path and its companion properties, you can define a specific route in native CSS and animate an element's position using standard @keyframes animations.

What is the CSS Motion Path Module?

CSS Motion Path provides a collection of properties designed to position and animate an element along a predefined path:

offset-path: Defines the geometric path the element follows.
offset-distance: Determines how far the element is positioned along the path, usually expressed as a percentage (0% to 100%) or a length unit (like px).
offset-rotate: Controls the rotation and orientation of the element as it travels along the path. By default, it is set to auto, aligning the element with the angle of the path.
offset-anchor: Specifies the point on the element itself that is pinned to the path (similar to transform-origin).

Defining Paths with `offset-path`

The offset-path property accepts various path definitions:

SVG Path Data (path()): The most flexible option, allowing you to use standard SVG d attribute coordinates.
```
.item {
  offset-path: path("M 100,100 C 200,200 400,0 500,100");
}
```
Basic CSS Shapes: Geometries such as circle(), ellipse(), rect(), and polygon().
```
.item {
  offset-path: circle(150px at center);
}
```
Ray (ray()): Defines a straight line starting from a point at a specific angle.
```
.item {
  offset-path: ray(45deg);
}
```
External SVG references (url()): References an existing <path> element within an inline SVG using its ID.

How Animation Works

Animating an element along a path does not require changing the path itself; instead, you animate the offset-distance property.

Here is a complete implementation:

.mover {
  width: 40px;
  height: 40px;
  background-color: #007acc;
  border-radius: 50%;

  /* Define the path */
  offset-path: path("M 20 80 Q 200 10 380 80 T 700 80");
  
  /* Orient the element automatically along the tangent */
  offset-rotate: auto;

  /* Run the animation */
  animation: moveAlongPath 4s infinite linear;
}

@keyframes moveAlongPath {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

Controlling Orientation with `offset-rotate`

By default, elements rotate to follow the direction of the curve (offset-rotate: auto). You can alter this behavior depending on the visual requirement:

offset-rotate: auto 90deg;: Keeps the element aligned to the curve with an additional 90-degree fixed offset.
offset-rotate: reverse;: Aligns the element backward along the path.
offset-rotate: 0deg;: Locks the element in its default orientation, preventing any rotation while it traverses the curve.

Performance and Browser Support

Modern browsers support offset-path using GPU acceleration when paired with standard CSS animations. Because changes to offset-distance avoid triggering layout recalculations, these animations run smoothly at 60 frames per second on both desktop and mobile devices.