Prsatut Dahal

Thank you so much for the help

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