Easing
Easing
Easing controls animation speed behavior.
Linear
ease: "none"
Constant speed.
---------
Power1
ease: "power1.out"
Starts fast, ends slow.
------___
Power2
ease: "power2.out"
Smoother effect.
gsap.to(".box", {
x: 300,
duration: 2,
ease: "power2.out"
});
Bounce
ease: "bounce.out"
Example
gsap.to(".ball", {
y: 300,
duration: 2,
ease: "bounce.out"
});
Elastic
ease: "elastic.out"
Spring-like effect.
gsap.to(".box", {
x: 300,
ease: "elastic.out(1, 0.3)"
});