MarcoBarbosa

Just wanted to say thanks for posting the video! You should know that your sharing effort is appreciated. Keep us posted!

Very nice. Thanks guys!

Btw I've solved it by having an internal variable: var i = 0; TweenMax.fromTo( $el, 2, { y: 0 }, { y: 3, repeat: -1, yoyo: true, ease: Power3.easeOut, onRepeat: function() { i++; if (i % 2 == 1) { // Going backwards... } } ); I would still like to know if there is anything in the core that supports this check.

Consider a repetable yoyo tween: TweenMax.fromTo( $el, 2, { y: 0 }, { y: 3, repeat: -1, yoyo: true, ease: Power3.easeOut, onRepeat: function() { // How do I find out this is going backwards? } ); The docs doesn't specify how to get it's direction. I know that reversed() doesn't get afffected by yoyo as stated: So how can I find out if it's yoyo'ing or not?

Thanks Jamie. I see your point. Yeah, you can rely on the callback unless you kill it. It does makes sense But then I question how can you have callbacks, specifically "onStart" and/or "onComplete" that rely on the tween to know when they should happen, yet always run it - regardless of being killed or not. Looks like I'd need some extra code to either kill it the way I want (by running the callbacks). In that case I'd rather rely on "delayedCall": TweenLite.delayedCall(onCompleteCallback, 0.3); Unless there are alternatives for this? It would be the same with Timeline, I suppose?

Hi all, Is there any way to make sure a onComplete callback always runs? I started by using the onComplete callback of TweenLite but since I kill any previous tweens, the onComplete callback may never get the chance to run. Example: function show ($view, onCompleteCallback) { TweenLite.killTweensOf($view); TweenLite.fromTo($view, 0.3, { opacity: 0, }, { opacity: 1, ease: Quad.easeInOut, onComplete: onCompleteCallback } ); } So I ended up using a setTimeout or TweenLite.delayedCall (which essentially is a better looking setTimeout? is it?). Like so: function show ($view, onCompleteCallback) { TweenLite.killTweensOf($view); TweenLite.fromTo($view, 0.3, { opacity: 0, }, { opacity: 1, ease: Quad.easeInOut } ); TweenLite.delayedCall(onCompleteCallback, 0.3); } Is this the "proper" way to do it? Is there any way to make sure the onComplete of a tween runs even if I kill previous Tweens? The complete callback here must run in order to perform some important tasks (such as removing listeners etc) - so I can't rely on the onComplete (apparently?). However I do have to base it on the tween because it shouldn't happen until it's completely visible in the view (tweened). And the reason I do killTweensOf before the Tween is just in case the user clicks around too fast: so it immediately stops whatever is being tweened and tweens only the last interaction. Is using the Timeline any different for callbacks? Any improvements suggestions here?

Thanks for the replies guys! The random gap trick is neat! I was trying shuffling the array first, then a for loop like yours and then "tl.add()" each item instead of from(). The add calls a function that returns a TweenLite: var tl = new TimelineLite(), letters = $("#boxWrapper div"), randomGap = 0.5, i; // Shuffle here before the loop for (i = 0; i < letters.length; i++) { // ??? //tl.add( tween(letters[i]), "-=0.7", "start"); // tl.add( tween(letters[i]), Math.random() * randomGap); // This is awesome: //tl.from(letters[i], 1, {rotation:180, autoAlpha:0}, Math.random() * randomGap); } function tween($el) { return TweenLite.from($el, 1, { rotation: 180, autoAlpha: 0 }) } Then I was trying to get my around around position vs stagger. I don't seem to grasp the "stagger" concept (I'm not from a flash background). From my understanding if the duration is 1 second and I want the next ones to overlap, I'd stagger them with "-=0.5" so they'd start half way through the previous one? But "position" seems to be exactly what I'm looking for: http://codepen.io/marcobarbosa/pen/JbxHi This "random gap" is a more neat, less code and probably more performant way than shuffling arrays. I'm happy

If you get this example: http://codepen.io/GreenSock/pen/ywJFi I'd like to see the letters animating in a random order. For example: the second letter appears 0.2s before the first one, the third one 0.3s and so on. I guess I could use delay but I'd like to learn the "proper" way with Greensock. Would that be the stagger function? or use .add() with random positions? Here's an example of what I want to achieve exactly (slight NSFW): http://www.shockblast.net/