fares

thanks a lot! @mvaneijgen was doing this for my web dev project and since the deadline is in 9 February i didn't have enough time to give this a serious start, it's still was fun trying to fix this code and make it animate properly (i made it work by making two timelines and didn't know how to stop it from starting when the page loads ? and had other issues ofc) but i think your solution is much better!, your help was really appreciated ❤️ and I'll make sure to check the linked materials and more when possible, here's the finale result: https://codepen.io/faresAlharbi0/pen/dyjwvVj

i have a div container that is <div class= "mcontainer is-active" id="mcontainer"></div> and for some reason the gasp to function works if written outside any function but when i add it to a function it logs "gasp target not found", i tried everything even passing a variable assigned with the queryselector function and it still didn't work code: open = true; const tl = gsap.timeline({duration: 1}); const dropicon = document.getElementById("dropicon") dropicon.addEventListener('click',dropDownMenu); const mcontainer = document.getElementById("mcontainer"); //works here// tl.to(mcontainer,{height:"100%"}, 0); function dropDownMenu(){ if(open === true){ mcontainer.classList.toggle("is-active"); open = false; //doesn't work here// tl.to(mcontainer,{height:"100%"}, 0); } if(open === false){ tl.to(mcontainer,{height:"0"}, "<"); open = true; } }