Search code examples
javascriptgsap

Greensock opacity animation from 0 to 1 and back again

I use this Greensock-command in order to animate a bunch of DIV's, each containing a PNG-cloud:

var animation = TweenLite.fromTo(clouddiv, duration, {x:offX, y:offY, scaleX:scaler, scaleY:scaler, opacity:0, ease:Sine.easeOut}, {x:newX, y:50, scaleX:scaler/3, scaleY:scaler/3, opacity:1, ease:Sine.easeOut, onComplete:finishedProcessing, onCompleteParams:[thiscloud]});

It works as intended, with one exception: I would like to fade the cloud's opacity from 0 to 1 the first 75% of the time - and then back to 0 the last 25%. I'm unsure how to deal with this... if it can be done inside the same command or if I need to apply timers and stuff. Ideas are much appreciated.

Solution

  • I assume you want the x/y/scaleX/scaleY to take the entire duration to complete their single movement, whereas opacity would go up and then back down during that same time. If I understand your goal correctly, there are 2 ways to accomplish this:

    1) Use a timeline and sequence the tweens:

    var animation = new TimelineLite({onComplete:finishedProcessing, onCompleteParams:[thiscloud]});
animation.fromTo(clouddiv, duration, {x:offX, y:offY, scaleX:scaler, scaleY:scaler, ease:Sine.easeOut}, {x:newX, y:50, scaleX:scaler/3, scaleY:scaler/3, ease:Sine.easeOut})
  .fromTo(clouddiv, duration * 0.75, {opacity:0}, {opacity:1}, 0)
  .to(clouddiv, duration * 0.25, {opacity:0}, duration * 0.75);

    Notice the first fromTo() controls the x, y, scaleX, and scaleY. Then I create two other tweens to control the opacity, one that makes it go from 0 to one for the first 0.75%, and the other going back to 0 for the final 25%. I use the position parameter to place them on the timeline exactly where I want. If you're not familiar with the position parameter, see http://greensock.com/position-parameter

    2) Use 3 tweens, and a delay on the final opacity one:

    TweenLite.fromTo(clouddiv, duration, {x:offX, y:offY, scaleX:scaler, scaleY:scaler, ease:Sine.easeOut}, {x:newX, y:50, scaleX:scaler/3, scaleY:scaler/3, ease:Sine.easeOut, onComplete:finishedProcessing, onCompleteParams:[thiscloud]});
TweenLite.fromTo(clouddiv, duration * 0.75, {opacity:0}, {opacity:1});
TweenLite.to(clouddiv, duration * 0.25, {opacity:0, delay:duration * 0.75});

    The nice thing about using a timeline (option 1) is that you can put everything into a single container instance and control it all as a whole (play/pause/reverse/seek) and I find it easier to tweak timings. If you rely on a lot of delays, it can get cumbersome, although in this case it's only one so it's no big deal.

    Happy tweening!