tweenmax reverse issue when added to timelinemax

[amorbytes]

Hi,

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 :

 

 

CSS :

       div,body{
            margin: 0;
            padding: 0;
        }

        .container{
            position: absolute;
            height: 100px;
            width: 100%;
            top: 150px;
        }

        .column{
            float: left;
            background-color: #00ffcc;
            height: 100%;
            width: 30px;
            margin-left:10px; 
            border-radius: 5px;
            text-align: center;
        }

 

HTML :

 

        <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>
        </div>

JS :

           

        var tl = new TimelineMax();
        var delayTween = 0.1;
        var tweenArr = [];
        
        $(".column").each(function () {
            
            tweenArr.push(
                TweenMax.to(
                        this,
                        1,
                        {
                            y:-60,
                            ease:"linear",
                            onComplete:function () {
                                this.reverse();    
                            } 
                        }
                )
            );

        });
        
        tl.add(
            tweenArr,
            '+=0',
            "sequance",
            delayTween
        );

        tl.vars = {
                    onComplete:function () {
                        tl.reverse();    
                    }    
                }

Any help would be greatly appreciated,

Thanks in advance.

[Carl]

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.

 

tweenArr.push(
                TweenMax.to(
                        this,
                        1,
                        {
                            y:-60,
                            ease:"linear",
                            repeat:1,
yoyo:true 
                        }
                )
            );

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

http://www.greensock.com/jump-start-js/#repeat

 

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:

http://codepen.io/GreenSock/pen/98d21312ba8cfae14c17e556087f9911

 

Is that the effect you were going for?

[electrichead]

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() {
  someCounter++;
  this.tl.pause();
},
onCompleteScope: scope,
onReverseComplete: function() {
  someCounter--;
  this.tl.pause();
},
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

paused:true

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

[Carl]

Electrichead,

 

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.

 

Thanks

[electrichead]

I'm not sure they are unrelated, but I will create a new post. I don't see an option to delete the post though.

[amorbytes]

Thank you so much carl, for your quick replay.
It is exactly what I want.