← Back to Lesson
🎨 GSAP Easing Visualizer
See and feel the difference between easing functions
Easing Functions Comparison
Click "Animate All" to see all easing functions in action, or click individual buttons to test specific eases.
Side-by-Side Comparison
Compare different easing types simultaneously to understand their characteristics.
💡 Key Concepts:
- Linear: Constant speed - use for progress bars or mechanical motion
- Power eases: Natural deceleration - power2.out is the most common default
- Elastic: Bouncy overshoot - great for playful, energetic interfaces
- Back: Slight overshoot - perfect for buttons and interactive elements
- Bounce: Physics-based bounce - adds character to animations
- Custom cubic-bezier: Full control over the easing curve