tweening images that are masked

[lucca08]

Hello everyone,

I have a little issue fading in an image... this is what i have :

 

import com.greensock.*;

import com.greensock.easing.*;

 

background.mask = mask1;

background2.mask = mask2;

background3.mask = mask3;

 

function forwardTween(){

TweenMax.to(mask1, 7, {width:350, delay:2, ease:Sine.easeInOut, onComplete:reverseTween});

TweenMax.to(mask2, 9, {x:700, delay:3, ease:Sine.easeInOut, onComplete:reverseTween});

TweenMax.to(mask3, 10, {x:100, delay:5, ease:Sine.easeInOut, onComplete:reverseTween});

}

 

function reverseTween(){

TweenMax.to(mask1, 8, {width:1, delay:5, ease:Sine.easeInOut, onComplete:forwardTween});

TweenMax.to(mask2, 10, {x:100, delay:4, ease:Sine.easeInOut, onComplete:forwardTween});

TweenMax.to(mask3, 10, {x:1024, delay:2, ease:Sine.easeInOut, onComplete:forwardTween});

}

 

forwardTween();

 

the thing is that i wanted the images that are been masked fade in first, then the animation with the mask start....

 

i tried this:

 

TweenMax.to(background, 5, {alpha:1, ease:Back.easeIn});

TweenMax.to(background2, 5, {alpha:1, ease:Back.easeIn});

TweenMax.to(background3, 5, {alpha:1, ease:Back.easeIn});

 

but its not working....

any ideas on what i can do ??

 

thank you so much for your time.

[GreenSock]

Yikes, you're gonna run into all sorts of problems with that code Here's why:

 

1) You've got 3 tweens that EACH call reverseTween when they complete and then in reverseTween(), you spawn another 3 tweens that each call forwardTween() when they're done. So walk through it...three tweens start. The first one finishes and spawns 3 more. The second one finishes and spawns 3 more. Same with the 3rd. Now you've got 9 tweens going. Each of those call forwardTween() when they finish. Now you've got 27 tweens going. Those all call reverseTween() when they're done, so you've got 81 tweens, and so on. It'll probably eventually freeze because of the logic flaw. Luckily TweenMax automatically analyzes new tweens for overlaps and intelligently overwrites the portions that should be, but you're causing a LOT of extra load on the CPU.

 

2) It's useless to use a Back.easeIn ease on an alpha tween because the values cannot go below 0 or above 1. It doesn't break anything, but you may see a sudden acceleration when the value comes back around with the Back.easeIn. I'd just use the standard ease or a Linear.easeNone or something.

 

3) If you want your objects to tween from an alpha of 0 to 1, you must initially set their alpha to 0 before tweening them to 1. Right now, your alpha is probably 1, so tweening it to 1 won't do anything. You could also use a TweenMax.fromTo() if you want to explicitly define the starting and ending values.

[lucca08]

thank you SOOO MUCH for the response!!!!!!!!!!!!!! it worked!!!

[lucca08]

Well.. it worked.. but somehow the image flickers really quickly then it fades to 1....

dont know what it could be...

here is the code:

import com.greensock.*;
import com.greensock.easing.*;

TweenMax.fromTo(bk, 10, {alpha:0}, {alpha:1});
TweenMax.fromTo(background, 10, {alpha:0}, {alpha:1});
TweenMax.fromTo(background2, 10, {alpha:0}, {alpha:1});
TweenMax.fromTo(background3, 10, {alpha:0}, {alpha:1});

background.mask = mask1;
background2.mask = mask2;
background3.mask = mask3;

function forwardTween(){
TweenMax.to(mask1, 7, {width:350, delay:2, ease:Sine.easeInOut, onComplete:reverseTween});
TweenMax.to(mask2, 9, {x:700, delay:3, ease:Sine.easeInOut, onComplete:reverseTween});
TweenMax.to(mask3, 10, {x:100, delay:5, ease:Sine.easeInOut, onComplete:reverseTween});
}

function reverseTween(){
TweenMax.to(mask1, 8, {width:1, delay:5, ease:Sine.easeInOut, onComplete:forwardTween});
TweenMax.to(mask2, 10, {x:100, delay:4, ease:Sine.easeInOut, onComplete:forwardTween});
TweenMax.to(mask3, 10, {x:1024, delay:2, ease:Sine.easeInOut, onComplete:forwardTween});
}

forwardTween();

 

 

thanks for any imput..

[GreenSock]

Did you read my previous post? You still have faulty logic in there that will spawn an insane number of tweens over time. You really should fix that.

 

Anyway, the reason for the flicker is because by default, tweens render for the first time on the next frame (right after they're created), but if you need them to render immediately, just set the immediateRender special property to true. TweenMax.fromTo(bk, 10, {alpha:0}, {alpha:1, immediateRender:true});

[lucca08]

thank you so much.. yes of course i read it.. but i dont know how to fix this... since it works, i left it alone.. truly appreciate your help.

[GreenSock]

Are you just trying to make 3 tweens go forwards and then backwards over and over again? If so, put them into a TimelineMax that has its repeat set to -1 (infinity) and yoyo set to true. Watch the basics video at http://www.greensock.com/timeline-basics/

 

Otherwise, you could probably just remove the onCompletes from the longer tweens (only keep the one on the shortest tween in each direction).