Skip to main content

Easing

Easing is the primary way to change the timing of your tweens. Simply changing the ease can adjust the entire feel and personality of your animation. There are infinite eases that you can use in GSAP so we created the visualizer below to help you choose exactly the type of easing that you need.

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%"
});

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.
Use the navigation links in the menu to the left for more information about complex eases.

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.

Notes​

  • GSAP uses a default ease of "power1.out". You can easily overwrite this in any tween by setting the ease property of that tween to another (valid) ease value. You can set a different default ease for GSAP by using gsap.defaults(). You can also set defaults for particular timelines.

  • You can reference eases as strings OR global objects. We recommend using strings so that you don't have to worry about importing so many things in modules and build systems, but you are free to use either approach.

    ease: "power2" //string form is preferred (this is the same as "power2.out")
    ease: Power2.easeOut //global object also works

  • Unlike other properties, the ease property can't be assigned a function-based value. In order to use a function based value inside of an ease function, you should use a loop outside of the tween, like so:

    document.querySelectorAll(".dot").forEach((dot, i) => {  
      gsap.to(dot, {
        duration: 1,
        ease: easeArr[i],
        delay: i * 0.06
      });
    });