Clear a GSAP TimelineMax animation after reversing it

Question

Basically I have a structure like this, my goal is to animate 4 divs so that when you click on one the other slide out and when you click on the container they return to their initial positions.

var TL = new TimelineMax;
$('.quater').on('click', function () {
    $faders = $('.container').find('.quater').not(this),
    $faders.each(function () {
        TL.to($(this), 1, {autoAlpha:0, x:50}, 0);
    });
});

$('.container').on('click', function () {
    TL.reverse();
    TL.clear();
});

The problem is that if I omit the "TL.clear();" it will work just for the first ".quater" div clicked, if i put in the "TL.clear();" the animation will not reverse anymore.

Answer 1

jsFiddle .

Snippet:

 var container = document.querySelector('.container'); var items = document.querySelectorAll('.item'); var duration = 0.6; var ease = Expo.easeOut; var numItems = items.length; var i; container.addEventListener('click', onContainerClicked, false); for (i = 0; i < numItems; i += 1) { (function(index){ items[index].timeline = new TimelineMax({ paused: true }); items[index].timeline.fromTo(items[index], duration, { y: 0, autoAlpha: 0.4 }, { y: -104, autoAlpha: 1, ease: ease }); items[index].addEventListener('click', onItemClicked, false); }(i)); } function onContainerClicked() { reverseAll(); } function onItemClicked(e) { reverseAll(); e.target.timeline.play(); } function reverseAll() { for (i = 0; i < numItems; i += 1) { items[i].timeline.reverse(); } } 

 html, body { margin: 0; padding: 0; } .container { background: #444; width: 512px; height: 104px; } .item { float: left; margin: 2px 0 0 2px; width: 100px; height: 100px; } .item:nth-child(odd) { background: #0cc; } .item:nth-child(even) { background: #cc0; } 

 <script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.17.0/TweenMax.min.js"></script> <div class="container"></div> <div class="item">&nbsp;</div> <div class="item">&nbsp;</div> <div class="item">&nbsp;</div> <div class="item">&nbsp;</div> <div class="item">&nbsp;</div>