Easing Functions in GSAP

Easing functions, also known as easing equations or timing functions, define the rate of change of an animation over time. GSAP provides a variety of easing functions that allow you to control the acceleration and deceleration of animations, creating smooth and natural motion effects. Let's explore some of the commonly used easing functions:

1. EaseInOut

The EaseInOut easing function starts slow, accelerates through the middle of the animation, and then slows down again towards the end. It creates a smooth transition with gradual acceleration and deceleration.

TweenMax.to(".box", 1, { x: 100, ease: Power1.easeInOut });

2. EaseOut

The EaseOut easing function starts fast and decelerates towards the end of the animation. It creates a quick start followed by a gradual slowdown, resulting in a snappy and responsive feel.

TweenMax.to(".box", 1, { y: 200, ease: Power2.easeOut });

3. Elastic

The Elastic easing function creates a spring-like effect, where the animation overshoots its final value before settling into place. It adds a playful and bouncy quality to animations.

TweenMax.to(".box", 1, { scale: 2, ease: Elastic.easeOut.config(1, 0.5) });

4. Bounce

The Bounce easing function simulates the motion of a bouncing ball, with a series of rapid rebounds as the animation progresses. It adds a playful and dynamic effect to animations.

TweenMax.to(".box", 1, { y: 300, ease: Bounce.easeOut });

5. SlowMo

The SlowMo easing function creates a slow-motion effect by stretching out the animation over time. It adds emphasis and dramatic flair to animations.

TweenMax.to(".box", 1, { x: 400, ease: SlowMo.ease.config(0.7, 0.7, false) });

6. Custom Easing

GSAP allows you to create custom easing functions using the CustomEase class. You can define the easing curve by specifying control points, giving you complete control over the animation's timing.

TweenMax.to(".box", 1, { y: 400, ease: CustomEase.create("custom", "M0,0,C0.48,0.808,0.726,1,1,1") });

Conclusion

By using easing functions in GSAP, you can add depth, personality, and polish to your animations. Experiment with different easing functions and parameters to achieve the desired motion effects for your web projects.

Archive