TweenLite.to() inside of rAF

[Mike D 1 Likes (Newbie)]

Hi,

 

I'm trying to use GSAP to animate objects in a ThreeJS project, within the requestAnimationFrame loop. Obviously this loop is firing much faster than the time it takes each tween to complete. I'm getting lots of overlapping Tweens on each object and I'm trying to figure out the best way to have each Tween run and then run it's onComplete function to tween itself back properly without losing it's references.

 

Would TimelineLite be better suited for this or is there a better approach using TweenLite?

 

Thanks in advance!

function animate() {
	if(animation === true )
		requestAnimationFrame( animate );
		
	TweenLite.killTweensOf(object);
	TweenLite.to(object, 0.5, { x: _radius * Math.cos( num ), y: _radius * Math.sin( num ), ease: Expo.easeOut, onComplete: function(_this,_x,_y) {
		// animate the object properties back to what they were before we started this tween
	}, onCompleteParams: ["{self}",object.position.x,object.position.y] });

}

[Jonathan 5,176 Likes (Superhero)]

hello.. do you have a codepen or jsfiddle example so we can see , this behavior in action to better see what your seeing in the scope of all your javascript, css, and html.. thx

[Mike D 1 Likes (Newbie)]

Thanks for the reply. I actually don't as this piece is buried deeply within the app logic. I can try and create a reduced test case to better illustrate the issue.

[Jonathan 5,176 Likes (Superhero)]

when you say your trying to have it tween itself back using the onComplete.. are you saying you trying to have it reverse back?

if so you can try to add yoyo:true but you will need to use TweenMax

http://api.greensock.com/js/com/greensock/TweenMax.html#yoyo()

also there are reverse methods. available... but if you mean something different, a reduced test case example will be very helpful in seeing your issue

thx

[Mike D 1 Likes (Newbie)]

Here's a fiddle displaying the issue I'm having. I need to figure out how to have the overlapping tweens transition smoothly without jumping.

 

http://jsfiddle.net/droplab/FCbUz/3/

[Mike D 1 Likes (Newbie)]

when you say your trying to have it tween itself back using the onComplete.. are you saying you trying to have it reverse back?

 

if so you can try to add yoyo:true but you will need to use TweenMax

 

http://api.greensock.com/js/com/greensock/TweenMax.html#yoyo()

 

also there are reverse methods. available... but if you mean something different, a reduced test case example will be very helpful in seeing your issue

 

thx

 

Good call on the yoyo, wasn't aware of that option. However, I'd like to have the tween fire and then return to x:0,y:0,z:0

 

The overall concept is these *wedges* are shooting out from the middle and then returning to the center, each time with a random radius/length.

 

Thanks!

[Mike D 1 Likes (Newbie)]

The yoyo option looks great, I'm wondering if this was the fix?

 

http://jsfiddle.net/droplab/FCbUz/4/

[Jonathan 5,176 Likes (Superhero)]

i didnt notice any bugginess like the above post example, so it looks like it is animating ok..

 

i did notice you are using the requestAnimationFrame... Paul Irish has a nice article with using it cross browser and with a nice polyfil..

 

http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

 

also GSAP also has a very nice equivalent which is the ticker property

 

http://api.greensock.com/js/com/greensock/TweenMax.html#ticker

 

The object that dispatches a "tick" event each time the engine updates, making it easy for you to add your own listener(s) to run custom logic after each update (great for game developers). Add as many listeners as you want.

 

example usage:

//add listener
 TweenMax.ticker.addEventListener("tick", myFunction);
 
 function myFunction(event) {
     //executes on every tick after the core engine updates
 }
 
 //to remove the listener later...
 TweenMax.ticker.removeEventListener("tick", myFunction);

also here is a nice tut by Lee Brimelow on using it with canvas (last 3rd of the video):

 

http://gotoandlearn.com/play.php?id=161

 

i hope that helps

[Mike D 1 Likes (Newbie)]

Thanks Jonathan! Greatly appreciate the pointers!

[GreenSock 8,117 Likes (Superhero)]

I didn't have much time to analyze the source, but I did want to fire off a couple of thoughts (for whatever they're worth):

 

I don't see any reason to tuck all that code into a requestAnimationFrame handler (seems wasteful) - why not either just use a TweenLite.delayedCall() or use a recursive call in an onComplete, kinda like:

function doMyAnimation(object) {
    var segment  = (...do whatever you want to calculate things...);
    TweenMax.to(object, 1, {
                        x: _radius * Math.cos( segment ), 
                        y: _radius * Math.sin( segment ), 
                        z:0, 
                        ease: Expo.easeOut, 
                        repeat:1,
                        yoyo:true,
                        onComplete: doMyAnimation
                        onCompleteParams: [object] 
    });
}
//loop through all your objects and start each one...
for (...) {
    doMyAnimation(yourThreeJSObject);
}

Also, I noticed you're using TweenLite.killTweensOf() right before you do each tween - you can simplify that (and make things faster) by just adding overwrite:"all" or overwrite:true to your tween. 

 

Lastly, using something like Power4.easeOut (or any Power* ease) will perform much faster than Expo.easeOut because the underlying algorithm is faster and the Power eases are baked right into the core rendering loop. You wouldn't notice any difference unless you're doing a lOT of simultaneous tweens, but I'm an optimization freak.