
MarcoBarbosa
Members-
Posts
8 -
Joined
-
Last visited
MarcoBarbosa's Achievements
2
Reputation
-
Just wanted to say thanks for posting the video! You should know that your sharing effort is appreciated. Keep us posted!
- 9 replies
-
- 1
-
-
- animation
- optimization
-
(and 2 more)
Tagged with:
-
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?
-
Make sure onComplete callback runs, even if Tween is killed?
MarcoBarbosa replied to MarcoBarbosa's topic in GSAP
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?
-
How to position tweens in random start order in a timeline?
MarcoBarbosa replied to MarcoBarbosa's topic in GSAP
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/