Killing Registered Effects

[TR-i]

Is there something special about registered effects that makes them harder to kill?

[OSUblake]

Welcome to forums @TR-i

 

Do you have an example of something that is hard to kill? A registered effect is just a helper function, and isn't an animation per se. It becomes whatever you return in your effect function. If you return a tween, it's a tween. If you return a timeline, it's a timeline. If you don't return anything, it's undefined.

 

[TR-i]

I do everything with objects ('spin' is a registered effect):

 

function newbehavior(b){
	const me = {};
.
.
	me.spin = null;
	me.refresh = function(){
		if(me.spin === Object(me.spin)){me.spin.kill(); me.spin = null;}
.
.
		me.spin = gsap.effects.spin(me.objects);
		}
	me.refresh();
	return(me);
}

A call to .refresh() should kill the old tween. Instead, the tweens pile up.

[OSUblake]

Do you think you can put that in a minimal demo? It's a little hard understanding what you're trying to achieve. 

[TR-i]

It's not a web page per se- over 10,000 lines of code. 'Small demo' is not in the vocabulary.

 

The list of targets (me.objects) changes between calls to me.refresh(). Same effect, different targets. Need to destroy everything and rebuild the tween because objects cannot be added after the tween is created.

 

I try to detect if there is already a tween and kill it: 

if(me.spin === Object(me.spin)){me.spin.kill(); me.spin = null;}

Also tried:

gsap.globalTimeline.kill();

But the object(s) are still getting attached to new tweens while still retaining the old ones.

[OSUblake]

You can easily put that in a minimal demo. I see no issues with .kill() here.

 

See the Pen GREvQbr by GreenSock (@GreenSock) on CodePen

 

[OSUblake]

19 minutes ago, TR-i said:

But the object(s) are still getting attached to new tweens while still retaining the old ones.

 

Make sure you are properly clearing your objects before calling refresh. You could try console.log the objects out to make sure it is what you expect. It should be an array of targets or a valid query string.

[TR-i]

We're a little out of sync. Objects in my world are PIXI sprites and nothing is CSS, only Javascript.

 

I'll get it figured out, just wanted to know if there was some caveat. In case it might be a factor, here's how I registered 'spin':

 

	gsap.registerEffect({
		name: "spin",
		effect: (targets, config) => {return gsap.to(targets, {duration: config.duration, repeat: config.repeat, yoyo: config.yoyo, ease: config.ease, pixi:{rotation: config.rotation}});},
		defaults: {duration: 2, repeat: -1, yoyo: false, ease: "none", rotation: 360}});

 

[OSUblake]

2 hours ago, TR-i said:

We're a little out of sync. Objects in my world are PIXI sprites and nothing is CSS, only Javascript.

 

It doesn't matter what your targets are, or if you're using CSS or PIXI, GSAP will work the same.

 

registerEffect is just a helper function that merges the defaults with any props you pass into it, and calls gsap.utils.toArray on the targets. 

 

You can replicate the exact the behavior of registerEffect like this. If you can't get the correct functionality working from this function, then your problem is probably unrelated to registerEffect, and you're doing something wrong elsewhere in your code.

 

const defaults = {
    duration: 2,
    repeat: -1,
    yoyo: false,
    ease: "none",
    rotation: 360
  }

function myEffect(targets, config) {
  targets = gsap.utils.toArray(targets);
  config = Object.assign({}, defaults, config);
  
  return gsap.to(targets, {
    duration: config.duration,
    repeat: config.repeat,
    yoyo: config.yoyo,
    ease: config.ease,
    pixi: { rotation: config.rotation }
  });
}

const animation = myEffect(someSprite, {repeat: 10});