Jump to content


Custom .reverse method for timelinemax

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 :


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!

Link to comment
Share on other sites

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 :


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

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • Solution

Hi again :)


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


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


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

Link to comment
Share on other sites

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
  • Like 3
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.