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