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
- 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
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.
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
"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.