[GSAP Animations trigger only on Click]

11 hours ago, akapowl said:

Man, I've gotta stop browsing the forums, when you are around @PointC 😅

You always beat me by seconds.

 

 

Created an approach of my own, also suggesting the use of utils.toArray

 

 

 

 

 

Thank you so much for the help

[GSAP Animations trigger only on Click]

So I've just started learning GSAP and I recently faced a problem with something that I'm trying. So I have multiple div's with the same style as height:20px; background:red; . Now, I used gsap in this to increase the height of the div, which is triggered by clicked event, to 100px. But the problem i've faced is that when I try to animate only one div that has been clicked, both the div's seem to be animated. Now I know what the problem is here and I've even found the solution with jquery using $(this). But i want a Solution using Vanilla JS. Your help would be much appreciated. Thanks. 

My Code

const div = document.querySelectorAll('div');
const divArr = Array.prototype.slice.call(div);

const tl = gsap.timeline({ paused: true, reversed: true });
 
tl.to(divArr, {
    height: '100px',
    duration: 1
})

divArr.forEach(e => {

    e.addEventListener('click', function () {
        if (tl.reversed()) {

            tl.play();
        } else {
            tl.reverse(this);
        }
    })
})