hi everone i'm having a trouple with passing a class to the "to" function

[fares 2 Likes (Newbie)]

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;

}

 

}

See the Pen VwBqYNR by faresAlharbi0 (@faresAlharbi0) on CodePen

[mvaneijgen 2,480 Likes (Superhero)]

Hi @fares welcome to the forum!

 

There where a few things wrong with your setup. First off, never use transitions in CSS, if you want to animate things with GSAP. If you do, the browser will tween every value GSAP is already animating!

 

Next what I would do is make it so your element is perfect with just CSS, make it how you want it to look when it is done animating. 

 

Your current setup seems logical, just animate to this value other wise tween to this other value. The only thing is you were adding new tweens to a timeline on each click, the easier solution is, build the timeline you want the animation to have and just play or reverse the timeline. 

 

So what I did is update your timeline (btw duration is part of the defaults:{} object) and set it to paused, so that id doesn't play on page load. Also set reversed to true. Then in your click function. Check if the animation is reversed: true if so tl.play() otherwise tl.reverse(); I had to remove some of your CSS, because it was trowing off the animation. Hope it helps and happy tweening! 

 

See the Pen LYBMZLR?editors=0101 by mvaneijgen (@mvaneijgen) on CodePen

 

I've also add some nice to haves with visibility: hidden; and autoAlpha: 1, read more about FOUC if your are interested. 

 

 

[fares 2 Likes (Newbie)]

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:

See the Pen dyjwvVj by faresAlharbi0 (@faresAlharbi0) on CodePen