W3C CSS offset-path Animation Module

CSS Motion Path Generator

Animate elements along custom CSS motion paths. Create curved trajectories, adjust movement and rotation, preview the animation, and export the CSS.

Motion Path Stage

Object animating smoothly along the SVG path via CSS offset-path.

Cycle Duration

Iterations

1 time

Orientation

auto 0deg

Generated HTML & CSS

Standard CSS offset-path and offset-rotate with prefers-reduced-motion media query.

.motion-stage {
  position: relative;
  min-height: 320px;
}

.motion-object {
  width: 36px;
  aspect-ratio: 1;
  border-radius: 10px;
  background: #14b8a6;
  offset-path: path("M 45 160 C 130 30 210 290 300 160 C 390 30 470 290 555 160");
  offset-rotate: auto 0deg;
  animation: follow-path 5s linear 0s 1 normal both;
}

@keyframes follow-path {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motion-object {
    animation: none;
    offset-distance: 0%;
  }
}

Uses standard CSS Motion Path properties, including offset-path, offset-distance, and offset-rotate. Browser support varies by browser and version, so test the generated CSS in your target browsers.

How to Animate Elements Along a Motion Path

Select or Enter SVG Path

Choose from built-in curves like Sine Wave, Arc, or Infinity Loop, or paste your own custom vector path coordinates.

Configure Motion & Tangent

Adjust duration, iterations, direction, and whether the moving object rotates automatically to face the direction of travel.

Export Standard CSS

Copy clean, vendor-free CSS with keyframes and reduced-motion fallbacks ready to drop into your stylesheets.

Automatic Tangent Rotation

When offset-rotate is set to auto, the element rotates to follow the direction of the motion path. The browser calculates its orientation as it moves along the path.

Zero JavaScript in Production

CSS Motion Path lets the browser position elements along a defined path without requiring a JavaScript animation loop.

Local In-Browser Processing

Your input is processed directly in your browser and is not uploaded to Pinatool's servers.

Frequently Asked Questions

What is CSS offset-path (Motion Path)?

The CSS Motion Path specification allows web developers to animate any DOM element along a predefined mathematical vector path (defined using standard SVG path `d` syntax: `offset-path: path("...")`). The browser handles positioning and tangent alignment automatically.

How does offset-rotate orient the moving object?

With `offset-rotate: auto`, the object turns dynamically to face the tangent direction of the curve as it moves. `auto-reverse` faces backward, and fixed degree angles (such as `0deg`) maintain an upright orientation throughout the journey.

How can I reverse or alternate the animation playback?

Use the playback direction control to switch between normal, reverse, and alternate directions. Alternate playback moves the element forward along the path and then back in reverse on each cycle.

Which browsers support CSS Motion Path?

CSS Motion Path properties are supported in current versions of major browsers, but compatibility can vary by browser and version. Test the generated CSS in your target browsers.

Can I use custom SVG paths exported from Illustrator or Figma?

Yes. Copy the path data string (`d="..."`) from any vector editor and paste it directly into the "SVG Path Data" input. Ensure the path coordinates roughly fit within a 600×320 viewBox for optimal previewing.

How is user accessibility preserved for reduced motion?

The generated CSS includes `@media (prefers-reduced-motion: reduce)` which disables the animation and positions the element statically at `offset-distance: 0%` for users who have requested minimal motion.

CSS Stagger Animation Generator

Create cascading entrance animations for grids and lists with pure CSS keyframes.

CSS Clip-Path Generator

Design custom polygon, circle, ellipse, and inset clip paths visually with live drag handles.

SVG Blob Generator

Create organic smooth vector shapes with gradients and path exports.