❮ Previous Next ❯

GSAP disable() and enable() Methods

  • Learn how to temporarily stop and re-activate GSAP animations and ScrollTrigger instances using disable() and enable().

  • Introduction

    In GSAP, disable() and enable() are used to turn animations or features OFF and ON without destroying them.

    They are commonly used when:

    • You want to stop animations on mobile

    • Disable scroll animations temporarily

    • Enable animations again after user interaction

    These methods are widely used with ScrollTrigger, timelines, and tweens created using GreenSock GSAP.

  • Basic Concept

    What does disable() do?

    • Stops the animation or ScrollTrigger

    • Removes event listeners (like scroll)

    • Keeps the configuration saved

    What does enable() do?

    • Re-activates the animation or ScrollTrigger

    • Restores scroll listening and animation behavior

    👉 Think of it like a power switch, not delete.

Disable a ScrollTrigger 

ScrollTrigger.getById("myTrigger").disable();

Enable it again 

ScrollTrigger.getById("myTrigger").enable();

  • Parameters / Options

    MethodDescriptionDefault
    disable()Turns off animation or trigger—
    enable()Turns it back on—
    disable(true)Resets animation stylesfalse
    enable(true)Refreshes on enablefalse

Practical Examples

Disable ScrollTrigger on Mobile 

if (window.innerWidth < 768) {
  ScrollTrigger.getAll().forEach(st => st.disable());
}

Enable on Button Click 

document.querySelector("#start").addEventListener("click", () => {
  ScrollTrigger.getAll().forEach(st => st.enable());
});

Disable Timeline Temporarily 

const tl = gsap.timeline();
tl.to(".box", { x: 300 });

tl.disable(); // stops it
tl.enable();  // resumes it

  • Common Mistakes

    1. ❌ Using disable() without saving reference
      ✔ Always store timeline or trigger in a variable

    2. ❌ Expecting disable() to reset styles
      ✔ Use disable(true) if reset is needed

    3. ❌ Calling enable() on destroyed trigger
      ✔ enable() works only if not killed

    4. ❌ Forgetting mobile resize handling
      ✔ Combine with resize events

  • Comparison

    MethodPurposeReusable
    disable()Temporarily stop✅ Yes
    enable()Restart✅ Yes
    kill()Permanently remove❌ No
    pause()Pause animation✅ Ye
❮ Previous Next ❯