Path Animations
Animate elements along SVG paths with predefined shapes, trail effects, particles, morphing, and advanced motion controls
Pro Features
Unlock advanced capabilities with the Pro version
8 Predefined Paths
Circle, ellipse, spiral, infinity, heart, star, wave, zigzag shapes built-in
Advanced Motion
Scale, opacity, rotation animations with customizable ranges
Visual Effects
Trail effects, particle systems, and glow for enhanced visuals
Direction Control
Normal, reverse, and alternate playback with various easing functions
Auto-Rotation
Automatically rotates element to follow path tangent
Custom Paths
Support for custom SVG path strings with full control
Installation
Install via CLI
npx @moontra/moonui-cli add path-animationsUsage
Examples
Predefined Path Shapes
8 built-in path shapes: circle, ellipse, spiral, infinity, heart, star, wave, zigzag
Trail & Particle Effects
Add motion trails and particle systems for enhanced visual feedback
Trail Effect
Particles
Combined
Direction & Easing Functions
Control animation direction and timing with various easing functions
Normal + Linear
Reverse + Ease-In-Out
Alternate + Ease-Out
Advanced Motion: Scale, Opacity & Rotation
Combine multiple animation properties for complex motion patterns
Scale + Opacity + Glow
Full Effects Combo
Morphing Between Shapes
Set `morph` and hand `morphPaths` a list of shapes: the path itself tweens from one silhouette to the next while the element keeps travelling along it. `morphDuration` controls each transition, `delay` holds the whole animation back before the first run, and `loopCount` caps how many times it repeats (leave it off for an endless loop).
Circle → Star → Heart
Partial Arcs, Custom Easing & Lifecycle Callbacks
`offsetStart` / `offsetEnd` clip the travelled span to a slice of the path (0–1), so the element sweeps an arc instead of the full loop. `cubicBezier` replaces the named easing with your own curve, `rotationOffset` re-aims the element when `autoRotate` is on, and `pathDashArray` renders the guide as a dashed stroke. The three callbacks — `onAnimationStart`, `onAnimationComplete`, `onPositionUpdate` — drive the live readout below.
Lifecycle + Easing + Dashed Path
Partial Arc (10% → 60%)