CODEWITHSUNDEEP
javascriptjquerycssgsap
Plastic
Plastic

Reputation: 10328

Clear a GSAP TimelineMax animation after reversing it

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.

Upvotes: 0

Views: 1565

Answers (1)

Tahir Ahmed
Tahir Ahmed

Reputation: 5737

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>

Upvotes: 1

Related Questions