Solution TR-i Posted September 13, 2021 Solution Share Posted September 13, 2021 Is there something special about registered effects that makes them harder to kill? Link to comment Share on other sites More sharing options...
OSUblake Posted September 14, 2021 Share Posted September 14, 2021 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. 2 Link to comment Share on other sites More sharing options...
TR-i Posted September 14, 2021 Author Share Posted September 14, 2021 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. Link to comment Share on other sites More sharing options...
OSUblake Posted September 14, 2021 Share Posted September 14, 2021 Do you think you can put that in a minimal demo? It's a little hard understanding what you're trying to achieve. Link to comment Share on other sites More sharing options...
TR-i Posted September 14, 2021 Author Share Posted September 14, 2021 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. Link to comment Share on other sites More sharing options...
OSUblake Posted September 14, 2021 Share Posted September 14, 2021 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 3 Link to comment Share on other sites More sharing options...
OSUblake Posted September 14, 2021 Share Posted September 14, 2021 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. Link to comment Share on other sites More sharing options...
TR-i Posted September 14, 2021 Author Share Posted September 14, 2021 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}}); Link to comment Share on other sites More sharing options...
OSUblake Posted September 14, 2021 Share Posted September 14, 2021 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}); 2 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now