CSS Motion Path Animation with offset-path
Motion path animation without JavaScript
Animating an element along a curve used to mean GSAP's motionPath plugin or manually calculating x/y coordinates in a JS loop. CSS offset-path lets you define the path, then animate offset-distance from 0% to 100%.
<!-- SVG in HTML --><svg><path id="track" d="M 0 0 C 150 -100 300 100 450 0"/></svg><div class="ball"></div>// gsap + motionPath plugin requiredgsap.to('.ball', { duration: 2, ease: 'none', motionPath: { path: '#track', autoRotate: true }});@keyframes along-path { from { offset-distance: 0%; } to { offset-distance: 100%; }}.ball { offset-path: path("M 0 0 C 150 -100 300 100 450 0"); offset-distance: 0%; offset-rotate: auto; animation: along-path 2s linear infinite;}motion path Browser Support
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
No library needed
Drop GSAP and the motionPath plugin. The path lives in CSS, the animation runs on the compositor.
Auto-rotation built in
offset-rotate: auto tilts the element to follow the curve. No angle math required.
Any path shape
Use any SVG path string: straight lines, bezier curves, circles. The element follows it exactly.
How it works
offset-path defines the route an element travels. You give it an SVG path string, the same format used in a <path d="..."> element. The element gets placed at position 0% by default.
offset-distance is a percentage that moves the element along that path. Animate it from 0% to 100% and the element travels the full route. Combine with offset-rotate: auto and the element also rotates to stay aligned with the curve direction.
You can use circle(), ellipse(), or ray() as the path value instead of a full SVG path string if your route is a simple shape.