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

power0

power1

power2

power3

power4

graphclockbox

• 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

ininOutout

Ease pack

Extra Eases

// click to modify the underlined values

gsap.to(target, {

duration:0.512.5510,

ease: "backbouncecircelasticexpononequad/power1Cubic/power2quart/power3strong/Quint/power4sineroughslowstepsexpoScaleCustomCustomBounceCustomWiggle.ininOutout",none",({

template:backbouncecircelasticexponone/linearquad/power1Cubic/power2quart/power3strong/Quint/power4sine.ininOutoutnone,

strength: 0.20.511.52,

points:102050100200,

taper:noneinoutboth,

randomize:,

clamp:

})",

(0.10.30.50.70.9,0.10.40.712,)",(scale from 1 to 2scale from 0.5 to 7scale from 10 to 2>,nonepower1.inpower1.outpower1.inOutpower2.inpower2.outpower2.inOut>)",(26122040)",(11.21.51.752,0.10.20.30.40.50.751)",(11.41.7234)",create("custom", ""0""),create("myWiggle", {

wiggles:15101520,

type:easeOuteaseInOutanticipateuniformrandom

}),

create("myBounce", {

strength:0.10.50.70.91,

endAtStart:truefalse,

squash:1234,

squashID: "myBounce-squash"

}),

y: -500

rotation: 360

x: "400%"

});

none (linear)

power1

power2

power3

power4

back

elastic

bounce

Other

circ

expo

sine

Coding tip - Default Easing

GSAP uses a default ease of "power1.out". You can 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.

gsap.defaults({
  ease: "power2.in",
  duration: 1,
});

gsap.timeline({defaults: {ease: "power2.in"}})

Plugin Eases

"slow", "rough", and "expoScale" eases are not in the core - they are packaged together in an EasePack file in order to minimize file size. "CustomEase", "CustomBounce", and "CustomWiggle" are packaged independently as well (not in the core).

See the installation page for details.