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 moonui-cli@latest 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