Skip to main content

Easing

Easing is possibly the most important part of motion design. A well-chosen ease will add personality and breathe life into your animation.

Take a look at the difference between no ease and a bounce ease in the demo below! The green box with no ease spins around at a consistent speed, whereas the purple box with the 'bounce' ease revs up, races along and then bounces to a stop.

gsap.to(".green", { rotation: 360, duration: 2, ease: "none" });

gsap.to(".purple", { rotation: 360, duration: 2, ease: "bounce.out" });

loading...

Under the hood, the "ease" is a mathematical calculation that controls the rate of change during a tween. But don't worry, we do all the math for you! You just sit back and select the ease that best fits your animation.

To use the ease visualizer, simply click on the ease name that you'd like to use. You can also click on the underlined text to change the values and type of ease.

Ease Visualizer

value: 0.00
progress: 0.00
  • Add point: ALT-CLICK on line
  • Toggle smooth/corner: ALT-CLICK anchor
  • Get handle from corner anchor: ALT-DRAG
  • Toggle select: SHIFT-CLICK anchor
  • Delete anchor: press DELETE key
  • Undo: CTRL-Z

Core

none

Extra

Club GSAP

// click to modify the underlined values
gsap.to(target, {
duration:,
ease: ".",none",({
template:.none,
strength: ,
points:,
taper:,
randomize:,
clamp:
})",
(,,)",(,)",()",(,)",()",create("custom", ""0""),create("myWiggle", {
wiggles:,
type:
}),
create("myBounce", {
strength:,
endAtStart:,
squash:,
squashID: "myBounce-squash"
}),
y: -500
rotation: 360
x: "400%"
});

Ease types​

For most eases you'll be able to specify a type. There are three types of ease: in, out and inOut. These control the momentum over the course of the ease.

tip

Ease out animations like "power1.out" are the best for UI transitions; they're fast to start which helps the UI feel responsive, and then they ease out towards the end giving a natural feeling of friction.

ease: "power1.in"
// start slow and end faster, like a heavy object falling

ease: "power1.out"
// start fast and end slower, like a rolling ball slowly coming to a stop

ease: "power1.inOut"
// start slow and end slow, like a car accelerating and decelerating
Can't get your ease working?

"SlowMo" ease, "RoughEase", "ExpoScaleEase", and custom eases ("CustomEase", "CustomBounce", and "CustomWiggle") are not in the core. They must be loaded separately. See the installation page for details.