ADVERT
Motion Path Generator
Define bezier control points, visualize the curve, and export production-ready CSS offset-path animations with configurable timing, iterations, and offset-rotate.
How to use this tool
- Adjust start point and bezier segment control handles.
- Configure stage size, timing, direction, fill mode, and offset-rotate.
- Preview motion and copy generated CSS `offset-path` animation output.
Path editing
- Supports multi-segment cubic bezier paths.
- Visual handle lines help align curvature and travel direction.
- Coordinate inputs allow fine control over each segment point.
Animation guidance
- Use `offset-rotate: auto` for natural heading alignment along curves.
- Tune duration and timing together to avoid abrupt path transitions.
- Pause and scrub `offset-distance` for frame-by-frame inspection.
FAQ
- Can I add and remove bezier segments?
- Yes. You can add new segments or remove existing ones while preserving the overall path.
- Does the output include keyframes?
- Yes. Generated CSS includes a `follow-motion` keyframes block and animation shorthand.
- Can I use custom `offset-rotate` values?
- Yes. Choose the custom option and provide a value like `auto 45deg`.
ADVERT
ADVERT