Collapse menu on scroll

[Patrick Rijkee]

Hello, 

 

I'm working on my very first gsap animation and ran into this problem:

 

the animation works perfectly on scroll down, it translates out of view so only the toggle button is visible.

But on scrolling up it does nothing even though it should reverse the animation. 

what am i doing wrong?

 

Thanks in advance,

 

Patrick Rijkee

See the Pen RwaEdZL by parpar78 (@parpar78) on CodePen

[ZachSaucier]

Hey Patrick and welcome to the GreenSock forums. 

 

The issue here is that you create an animation the first time the function runs but you don't have access to it later the subsequent times that the function runs. What you should do instead is create the animation beforehand and use control methods inside of the event listener function. This is one of many tips that I recommend in my article on animating efficiently and also mentioned in the most common GSAP mistakes article. I highly recommend both  

 

You could actually do what you're trying to do in two lines:

See the Pen BaKMmbO?editors=0010 by GreenSock (@GreenSock) on CodePen

[Patrick Rijkee]

Wow, that was fast😃,

 

Thank you, this is exactly what i need.

looking forward to using gsap more often.

 

Thanks again,

 

Patrick Rijkee