Pixi.js killTweensOf wildcard glob not functional

[Jason Sturges]

Prior to GSAP3 I recall a `killAll()` function that supported Pixi.js display objects.

 

Instead, when I call `gsap.killTweensOf("*")` using the wildcard glob it does not kill the tween.

 

CodeSanbox example: https://codesandbox.io/s/gsap-kill-tweens-of-ww9fsb?file=/src/index.js

 

Example code: 

import PixiPlugin from "gsap/PixiPlugin";
import { gsap, Power4 } from "gsap";

gsap.registerPlugin(PixiPlugin);
PixiPlugin.registerPIXI(PIXI);

const tween = gsap.timeline({ repeat: -1 });
tween
  .to(circle, {
    duration: 0.35,
    pixi: { tint: 0xffff00 },
    ease: Power4.easeOut,
    callbackScope: this
  })

  .to(circle, {
    duration: 0.65,
    pixi: { tint: 0x123456 },
    ease: Power4.easeOut,
    callbackScope: this
  });

setTimeout(() => {
  console.log("Killing all tweens");
  gsap.killTweensOf("*");
}, 5000);

Tracing the GSAP code, it finds my timeline but the wildcard is not adding the tweens for disposal.

 

Presume this is either a bug, or I'm not using `killTweensOf` correctly in the Pixi.js space.

[OSUblake]

6 minutes ago, Jason Sturges said:

Presume this is either a bug, or I'm not using `killTweensOf` correctly in the Pixi.js space.

 

Definitely that latter. It does not support wildcards, and with PixiJS you would need to reference the actual object like this.

 

gsap.killTweensOf(circle);

 

[OSUblake]

7 minutes ago, Jason Sturges said:

Prior to GSAP3 I recall a `killAll()` function that supported Pixi.js display objects.

 

There was, but that's sounds a little brute as it will kill everything.

https://greensock.com/docs/v2/TweenMax/static.killAll()

 

If you wanted something similar, you could getChildren of the globalTimeline, and then then loop through and kill everything it returns.

 

[Jason Sturges]

So, the actual use case here is I have a few hundred components in Storybook, and when changing stories the page is swept away leaving GSAP to error infinitely in the console.

 

As these tweens are running inside components, and not specifically part of visual stories, I was hoping to have a story change callback handler that could simply kill / clear all tweens.

 

Essentially (meta):

 

onStoryChange {
  killAll()
}

 

Otherwise I can walk the display list and cleanup better, as each individual component can start / stop its own tween references.

[OSUblake]

Gotcha, how about calling this?

 

function killAll() {
  gsap.globalTimeline.getChildren().forEach(c => c.kill())
}

 

[Jason Sturges]

Perfect - thanks!

[GreenSock]

Maybe simpler: 

gsap.globalTimeline.clear();