GSAP icon indicating copy to clipboard operation
GSAP copied to clipboard

Unexpected behavior: Animation can be resumed after kill() when pause() is called in between

Open CHENJIAMIAN opened this issue 5 months ago • 0 comments

I've noticed an unexpected behavior in GSAP animations that might be a bug. Here's the scenario:

  1. Create a GSAP animation using fromTo()
  2. Call kill() on the animation
  3. Call pause() on the animation
  4. Call resume() on the animation

Expected behavior: The animation should not resume, as it has been killed and should no longer exist in the GSAP system.

Actual behavior: The animation resumes and plays as if it was never killed.

This behavior is inconsistent because:

  • If you call resume() immediately after kill(), the animation does not resume (which is expected).
  • However, if you insert a pause() call between kill() and resume(), the animation mysteriously comes back to life.

Steps to reproduce:

  1. Create a simple GSAP animation:
    let tween = gsap.fromTo(".myElement", {x: 0}, {x: 100, duration: 2});
    
  2. Immediately kill the animation:
    tween.kill();
    
  3. Then pause it:
    tween.pause();
    
  4. Finally, try to resume it:
    tween.resume();
    

The animation will unexpectedly play.

Questions:

  1. Is this intended behavior?
  2. If not, is this a known issue?
  3. Are there any workarounds or best practices to avoid this unexpected behavior?

Environment:

  • GSAP version: https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.4/gsap.min.js

Thank you for your time and consideration!

CHENJIAMIAN avatar Sep 13 '24 11:09 CHENJIAMIAN