Elastic Animation
Smooth elastic spring animations with customizable physics, oscillation control, and advanced effects like rubber band and jello
Pro features
What the Pro version adds to this component.
Spring Physics
Realistic elastic motion with customizable physics
Advanced Effects
Rubber band, jello, and morphing animations
Multiple Triggers
Hover, click, auto, scroll, continuous
Multi-directional
Horizontal, vertical, both, diagonal
Fine Control
Elasticity, damping, oscillation tuning
Natural Motion
Physics-based animation principles
Installation
Install via CLI
npx @moontra/moonui-cli add elastic-animationUsage
Examples
Direction Variants
Control the animation direction - horizontal, vertical, both, or diagonal movement
Trigger Types
Different trigger options - hover, click, auto play, and continuous animation
Elasticity Levels
Control the spring elasticity from subtle to extreme bounce effects
Damping Control
Adjust damping to control how quickly the animation settles
Rubber Band Effect
Create rubber band stretching animations with intensity control
Jello Wobble Effect
Create playful jello wobble animations with customizable wobble count
Interactive Buttons
Real-world button components with elastic hover and click effects
Card Interactions
Enhanced card components with elastic hover states and interactive feedback