GSAP Animations trigger only on Click

[Prsatut Dahal]

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);
        }
    })
})

 

[PointC]

Hi @Prsatut Dahal 

 

Welcome to the forum.

 

This should get you started.

See the Pen gOrWPbW by PointC (@PointC) on CodePen

 

Happy tweening and welcome aboard.

 

[akapowl]

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

 

See the Pen 1fe48a2efeb253bc7c174336cd3471a4 by akapowl (@akapowl) on CodePen

 

 

[PointC]

Haha. I honed my skills back in the day against Carl, Jonathan and Blake. I lost 99% of those answer battles, but I got a little faster each time I answered. 

[Prsatut Dahal]

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