Eases

Easing is the primary way to change the timing of your tweens. Simply changing the ease can often times change the entire nature of your animation. But because there are infinite eases that you can use in GSAP, we created the visualizer below to help you choose exactly the type of easing that you need. You can also just copy the ease (or entire tween).

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.

For more information about complex eases, you can click on the navigation links in the navigation menu to the left.

Notes

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

• 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

• Each ease has a .getRatio() method that returns the tween's progress ratio after it has been translated into corresponding ease ratio.