Is it all right to use TweenMax inside my update loop?

[caymanbruce]

I am writing a canvas project, suppose I have something inside my update loop like this:

let state = play;

function play() {
 gsap.TweenMax.to(...)
}

function update() {
  raf(update);
  state();
}

raf is short for requestAnimationFrame. If I understand correctly when tweening gsap already uses raf. Putting TweeenMax inside the udpate will it have negative efffect on the animation?

[OSUblake]

To start out, I would use GSAP's ticker instead. It will keep the update calls in sync with your tweens.

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ticker/

 

Will it affect performance? It might. It's really hard to say without seeing some code running. Can you make a simple demo of what you're trying to do?

 

 

 

If you're creating hundreds of tweens on every tick, you might need to do some optimization. As an example, here's a particle emitter that I optimized a little by using the ModifiersPlugin. Instead of creating thousands of new tweens every couple of seconds, I reuse them and just modify their values.

 

See the Pen oLGBXy?editors=0010 by osublake (@osublake) on CodePen

 

.

[caymanbruce]

To start out, I would use GSAP's ticker instead. It will keep the update calls in sync with your tweens.

http://greensock.com/docs/#/HTML5/GSAP/TweenLite/ticker/

 

Will it affect performance? It might. It's really hard to say without seeing some code running. Can you make a simple demo of what you're trying to do?

 

 

 

If you're creating hundreds of tweens on every tick, you might need to do some optimization. As an example, here's a particle emitter that I optimized a little by using the ModifiersPlugin. Instead of creating thousands of new tweens every couple of seconds, I reuse them and just modify their values.

 

See the Pen oLGBXy?editors=0010 by osublake (@osublake) on CodePen

 

.

Thanks for your quick reply. 

 

I would like to use TweenMax ticker only however the tweening is part of a Canvas game I make with PIXI.js. Everything else uses the update loop including the sprites animation. There could be hundreds of tweens per tick because I am making a particle/texture background and the background will be scaled on some tick. I can't make a codepen demo because the window freezes from time to time as I experimented.

[OSUblake]

If you're using a regular requestAnimationFrame call for the update, you should be fine using GSAP's ticker. I've never had a problem with it.

 

Here's a pretty simple demo I made the other day. See if you can fork it and get it working. Are you getting any errors when it freezes? Cross-origin problems happen all the time on CodePen when you try to load a texture.

See the Pen ZBNXLG?editors=0010 by osublake (@osublake) on CodePen

[caymanbruce]

If you're using a regular requestAnimationFrame call for the update, you should be fine using GSAP's ticker. I've never had a problem with it.

 

Here's a pretty simple demo I made the other day. See if you can fork it and get it working. Are you getting any errors when it freezes? Cross-origin problems happen all the time on CodePen when you try to load a texture.

See the Pen ZBNXLG?editors=0010 by osublake (@osublake) on CodePen

 

Thanks now I use GSAP's ticker event to handle my game's update. However, I wonder if I can do a Tweening inside the ticker event. For example I need to do some kind of game logic when some condition is triggered in the animation. Like putting an if clause to check the condition and then do a TweenMax.to(...). What's your suggestion on getting this done nicely? 

[OSUblake]

Depends on what you're doing. Here's a good example that does some updating and conditional stuff in the render loop.

See the Pen vNwRdO?editors=0010 by osublake (@osublake) on CodePen

[caymanbruce]

Depends on what you're doing. Here's a good example that does some updating and conditional stuff in the render loop.

See the Pen vNwRdO?editors=0010 by osublake (@osublake) on CodePen

 

Thanks I owe you a thousand thanks. This is really awesome. I hope the tweenings don't conflict with each other since they are all inside the ticker method.