SVG Animations
Advanced SVG animation effects including drawing, morphing, transformations, and filters with physics-based controls
Pro features
What the Pro version adds to this component.
8 Animation Types
Draw, morph, fill, stroke, transform, path, mask, and filter animations
Advanced Options
Extensive customization for each animation type with dedicated option sets
Flexible Triggers
Auto, hover, click, scroll, and manual trigger support
Visual Effects
Built-in glow and shadow effects for enhanced visual impact
Physics-Based Easing
Natural motion with cubic-bezier and multiple easing functions
Loop Control
Precise loop control with count limits and infinite loops
Installation
Install via CLI
npx @moontra/moonui-cli add svg-animationsUsage
Examples
Animation Types Gallery
Explore all 8 animation types with different visual effects
Draw Animation Variations
Different path drawing orders and effects
Transform Animations
Rotate, scale, translate, and skew transformations
Fill Direction Animations
Directional fills with gradient support
Stroke Animations
Advanced stroke drawing with width animation
Filter Effects
Dynamic blur, brightness, contrast, and color effects
Trigger Types
Different animation triggers: hover, click, scroll, auto
Easing Functions
Compare different easing functions for smooth animations
Glow & Shadow Effects
Add visual depth with glow and shadow effects
Interactive Icon Cards
Real-world examples with complex SVG icons and interactions
Playback Control & Lifecycle Callbacks
`autoPlay` decides whether the animation runs on mount, `delay` holds it back first, and `loopCount` caps the repeats (omit it for an endless loop). The three callbacks report progress out to your app: `onAnimationStart` and `onAnimationComplete` fire once per run, while `onFrame` streams a 0–1 progress value every frame — useful for driving a counter, a progress bar, or a chained animation. `containerClassName` styles the wrapper around the SVG, separately from `svgClassName`.