Jump to content
GreenSock

Mike D

TweenLite.to() inside of rAF

Recommended Posts

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] });

}
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 :)

  • Like 1
Link to comment
Share on other sites

Thanks Jonathan! Greatly appreciate the pointers!

Link to comment
Share on other sites

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. :)

  • Like 2
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×