Next ❯

Easing Introduction

  • Easing controls the timing and flow of your animations — how they speed up, slow down, or bounce. By simply changing the easing, you can completely alter the feel, emotion, and rhythm of your animation.

  • Plugin Eases

    Some special eases aren’t part of GSAP’s core library to keep file sizes small.
    They’re available as add-on plugins:

    • "slow"

    • "rough"

    • "expoScale"

    These come together in the EasePack file.
    Additionally, you can load these separately:

    • "CustomEase"

    • "CustomBounce"

    • "CustomWiggle"

  • How Easing Works

    Easing changes how your animation progresses over time — not the start or end values, but the speed between them.

gsap.to(target, {
  duration: 2.5,
  ease: "power1.out",
  y: -500
});

  • Default Easing in GSAP

    By default, GSAP uses the "power1.out" easing.
    You can override this per tween, or set a new default globally or within a timeline.

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

// Or set defaults for a timeline
gsap.timeline({
  defaults: { ease: "power2.in" }
});

  • How to Use the Ease Visualizer

    1. Open the Ease Visualizer on the GSAP site.

    2. Click on any ease name (like power4.inOut or elastic.out).

    3. Adjust the underlined values to fine-tune the easing curve.

    4. Preview how your animation’s motion will feel.

    You’ll find every kind of ease — from smooth power curves to bouncy or wiggly motion — helping you craft animations with the perfect personality.

    Pro Tip:
    Experiment with different eases to match your design’s emotion.

    • power4.inOut → cinematic, smooth feel

    • elastic.out → playful, springy

    • back.inOut → dramatic overshoot

    • rough → jittery, energetic

Next ❯