GSAP Power1 Ease Animation

A demonstration of GSAP's Power1 easing function showing all three easing modes. Power1 provides subtle, linear-like acceleration with smooth transitions.

Easing Modes Demonstrated

This example showcases the three different easing behaviors:

• power1.in (Circle 1) - Starts slowly and accelerates toward the end
• power1.out (Circle 2) - Starts quickly and decelerates toward the end
• power1.inOut (Circle 3) - Combines both: slow start, fast middle, slow end

Key Features

• Gentle acceleration curves for natural movement
• Perfect for subtle UI transitions and micro-interactions
• Lighter alternative to higher power eases (power2, power3, power4)

Usage Tips

• Use power1.in for elements exiting or hiding
• Use power1.out for most UI elements entering the screen
• Use power1.inOut for smooth back-and-forth animations
• Compare with higher power values (power2, power3) for more dramatic effects