Jump to content
Search Community

tweenmax reverse issue when added to timelinemax

amorbytes test
Moderator Tag

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

I am trying to animate div with timeline max.
I am following this procedure :
- loop for total div elements with jquery's each
- create tween for each div element with tweenmax 
- on complete of tweenmax reverse it 
- push tweenmax to tweens_array
- add tweens_array to timeline max
- on complete of timelinemax reverse it
Problem : div is not tweening reverse it will come directly to origional position.
here is this source code for refrence :
            margin: 0;
            padding: 0;

            position: absolute;
            height: 100px;
            width: 100%;
            top: 150px;

            float: left;
            background-color: #00ffcc;
            height: 100%;
            width: 30px;
            border-radius: 5px;
            text-align: center;

        <div class="container">
            <div class="column column1">1</div>
            <div class="column column2">2</div>
            <div class="column column3">3</div>
            <div class="column column4">4</div>
            <div class="column column5">5</div>
            <div class="column column6">6</div>
            <div class="column column7">7</div>
            <div class="column column8">8</div>
            <div class="column column9">9</div>
            <div class="column column10">10</div>
            <div class="column column11">11</div>
            <div class="column column12">12</div>
            <div class="column column13">13</div>
            <div class="column column14">14</div>
            <div class="column column15">15</div>
            <div class="column column16">16</div>
            <div class="column column17">17</div>
            <div class="column column18">18</div>
            <div class="column column19">19</div>
            <div class="column column20">20</div>
            <div class="column column21">21</div>
JS :
        var tl = new TimelineMax();
        var delayTween = 0.1;
        var tweenArr = [];
        $(".column").each(function () {
                            onComplete:function () {


        tl.vars = {
                    onComplete:function () {

Any help would be greatly appreciated,

Thanks in advance.

  • Like 1
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.


It appears you are giving the engine conflicting instructions. 


As far as the timeline is concerned you are only adding a bunch of tweens in direct sequence that play forwards. The timeline is fine with those instructions. The timeline is also fine with playing the entire sequence backwards. No problem.


The trouble comes in when you put the onComplete callbacks on each tween which tell each tween to play backwards. The timeline has no knowledge this is happening. Those onComplete callbacks sort of act like an external force that is trying to take control of the tweens away from the timeline. 




From what I tell there is no need to use an onComplete callback to reverse the tweens since you are using TweenMax tweens which are easily reversible.



To see how a TweenMax repeats and how the yoyo parameter works see:



Although it is great that you provided all the code, using a free service like codpen.io makes it much easier for us to trouble shoot these types of questions.


Here is your code that I modified on codepen:



Is that the effect you were going for?

  • Like 1
Link to comment
Share on other sites

I do think that the answer above is much better; but I have also come across a problem with the onComplete callbacks in nested TimelineMax's.


If you have a TimelineMax with some TimelineMax's inside it, and each of those has an onComplete below:

onComplete: function() {
onCompleteScope: scope,
onReverseComplete: function() {
onReverseCompleteScope: scope

where scope has a variable tl that is the outer TimelineMax; calling play() multiple times will do the correct thing and play the inner sequences one at a time.


However, when you call reverse() after calling play() or vice versa, calling play() after reverse(), the outer timeline is paused immediately (i.e. onReverseComplete is called immediately without the timeline actually reversing). It seems that when changing directions in this scenario, the timeline is automatically paused. When calling the same action multiple times e.g. play() followed by more play()'s, it is fine.


In the outer timeline, I have specified


I am not sure if that would cause the issue to happen?

Link to comment
Share on other sites



It would be great if you could delete your post above and create a new and separate topic

(preferably with a simplified and testable sample hosted on codepen or jsfiddle). 


Seems a bit more complicated than what amorbytes needed help with. Want to make sure he/she gets their question answered satisfactorily before going off in another direction.



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.
  • Create New...