MarcoBarbosa
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Posts posted by MarcoBarbosa
-
-
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.
- 1
-
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:
This value is not affected byyoyo repeats (TweenMax and TimelineMax only) and it does not take into account the reversed state of anscestor timelines.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:
See the Pen JbxHi by marcobarbosa (@marcobarbosa) on CodePen
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:
See the Pen ywJFi by GreenSock (@GreenSock) on CodePen
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):
Greensock Animation Techniques
in GSAP
Posted
Just wanted to say thanks for posting the video!
You should know that your sharing effort is appreciated.
Keep us posted!