Animation Easing Functions Laboratory
Interactive easing function visualization with real-time animation and tween playground for exploring motion curves.
🎬 This example showcases animation capabilities of the play.ts library
Easing Curve Visualization
Current function: Linear
Animation Controls
Progress: 0%
Tween Playground
Current Value: 0.00
Progress Visualization
Easing Functions
linear
quad
cubic
quart
quint
sine
expo
back
elastic
bounce
Easing Function Categories
- • Linear: Constant rate of change
- • Quad/Cubic/Quart/Quint: Polynomial curves with increasing steepness
- • Sine: Smooth sinusoidal transitions
- • Expo: Exponential acceleration/deceleration
- • Back: Overshoots target before settling
- • Elastic: Oscillating spring-like motion
- • Bounce: Bouncing ball effect