Custom .reverse method for timelinemax

[farhoudz 8 Likes (Newbie)]

Is there is any way to reverse a timeline in a different way compare to when it plays for example in my case, I would like to move elements in the scene one by one but when it comes to reverse the scene I am thinking of moving all the elements out of the scene at once ! So is there a shortcut for this or I have to write another timeline?

 

This is my timeline code :

var tlThree = new TimelineMax(); // SP

            tlThree.add( TweenMax.to(".layer-thirtyFour", 0.35, {visibility:"visible", top:0}) );
            tlThree.add( TweenMax.to(".layer-thirtyFive", 0.35, {visibility:"visible", left:0}) );
            tlThree.add( TweenMax.to(".layer-thirtySix", 0.35, {visibility:"visible", top:0}) );
            tlThree.add( TweenMax.to(".layer-thirtySeven", 0.35, {visibility:"visible", left:0}) );
            tlThree.add( TweenMax.to(".layer-thirtyEight", 0.35, {visibility:"visible", left:0}) );
            tlThree.add( TweenMax.to(".layer-thirtyNine", 0.35, {visibility:"visible", top:0}) );
   tlThree.add( TweenMax.to('.detail[data-title="seaLevelRise"]', 0.35, {display:"block", alpha:1}) );
   tlThree.add( TweenMax.to('.up[data-dest="greenHouse"], .down[data-dest="cleanEnergy"]', 0.35, {delay:0.2, display:"block", alpha:1}) );

Normally I use .reverse method like this :

tlThree.reverse()

But it reverses the timeline one element at a time and in some special cases I would like to reverse the timeline as a whole in a way that all elements move out of the page in 0.35 s time, please note that my CSS styles for these layers are like this for example :

.layer-thirtyNine {

visibility: hidden;
position: absolute;
left: 0;
top: -100%;

}

So if this goes out of the page as a whole in any direction does it interfere with CSS ? 

 

Thanks in advance.

 

PS: www.12wave.com Has done this using GSAP but I could not find out how!

[Diaco 1,948 Likes (Superhero)]

Hi farhoudz 

 

i can't see that behavior ( reverse tweens at same time ) in the mentioned website !... the base timeline reversed with timeScale , pls try this :

baseTimeline.reverse().timeScale(5);

and if you want to everything reverse at same time i think you have 2 way to go :

 

- you can use another tweens at the end of your timeline with same labels

 

- or use another timeline

 

- or reverse the nested timelines at same time

[farhoudz 8 Likes (Newbie)]

How can I reverse the nested timelines at same time exactly ? is there a method in GSAP for this matter Or I have to write separate tweens to achieve this? 

 

I have also tested .timeScale() method like this :

tlThree.reverse().timeScale(2).eventCallback("onReverseComplete", function(){ tlFour.play(); });

But the problem is that it affects tlThree.play() the next time it plays also and I want this timeScale to happen only when the timeline is reversing !

 

Thanks again.

[Diaco 1,948 Likes (Superhero)]

Hi again

 

for next time that you want to play with normal speed you can simply use this :

 tlThree.restart().timeScale(1));

and pls make a reduced Codepen Demo available for better response .

 

See the Pen dPMVpZ by MAW (@MAW) on CodePen

[Carl 9,066 Likes (Superhero)]

What you are describing is not a reverse.

When you reverse() a timeline it plays backwards and respects all the timing of all the child tweens and timelines.

 

You can, as Diaco suggested, reverse() each timeline independently but this does not reverse the parent timeline. It can cause a very awkward situation where restarting the parent will then NOT restart the children as you expect. In order to reverse the children independent of their parent, their startTime()'s get adjusted. This is not a bug, it is completely by design. 

 

Please see the demo here:  http://codepen.io/GreenSock/pen/emZEam?editors=101

Let the animation play and then hit "reverse"

You will see the child animations all reverse at the same time, however when the timeline restart()s the reversed children are all at the end of the timeline.

 

I don't know what the requirements of your app are or what is expected, but for a situation like this I would recommend creating a new Timeline when you want to play the parent forward, and create a new timeline when you want to reverse the children. Just create functions that create the timelines that you need and call them when you need them

function forward() {
 var tl = new TimelineLite()
// add tweens
}

function back() {
 var tl = new TimelineLite()
// add tweens
}

[farhoudz 8 Likes (Newbie)]

Thank you Carl, I really appreciate your support, I think for now I use the .timeScale() method but I really think if I write new timelines for that matter it's better, the thing was I thought there is a method for this that could help me write less code.

 

Thanks again all of you