Jump to content

Search In
  • More options...
Find results that contain...
Find results in...
Patrick Rijkee

Collapse menu on scroll

Recommended Posts



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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

Wow, that was fast😃,


Thank you, this is exactly what i need.

looking forward to using gsap more often.


Thanks again,


Patrick Rijkee

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.