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%.
2 from { offset-distance: 0%; }
3 to { offset-distance: 100%; }
4}
5
6.ball {
7 offset-path: path("M 0 0 C 150 -100 300 100 450 0");
8 offset-distance: 0%;
9 offset-rotate: auto;
10 animation: along-path 2s linear infinite;
11}
2<svg><path id="track" d="M 0 0 C 150 -100 300 100 450 0"/></svg>
3<div class="ball"></div>
4
5// gsap + motionPath plugin required
6gsap.to('.ball', {
7 duration: 2,
8 ease: 'none',
9 motionPath: { path: '#track', autoRotate: true }
10});
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.
Your first month is free
Managed WordPress hosting for faster sites.
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.