Jump to content


Header/Nav bar slide down as the user scroll

Recommended Posts

I am trying to achieve something like initially on page load there will be a header on user user scrolls down the initial header should hide and a new header should slide down. i have done this using animate css and plain js. but this works smoothly only when the user scroll is smooth. when the user scrolls the page very fast the header slidedown faces some glitchs so i want to use scrolltrigger to achieve this. may i know how to achieve this.  

Link to comment
Share on other sites

Hey Vivek and welcome to the GreenSock forums. Your request is actually quite broad. Do you want the animation to be gradual as the user scrolls down or should the whole animation play once a certain point is reached? Should the animation reverse when going the opposite direction? A minimal demo of your issue would be very helpful if you'd like our help debugging.


Maybe this demo can help you out in the mean time:

See the Pen mdVyPvK by GreenSock (@GreenSock) on CodePen


Link to comment
Share on other sites

Hi.. Thanks for the quick response. 

Yes the second header which is hidden by default and it will be comes down gradually as user scrolls 

Link to comment
Share on other sites

Yes the second header should hide and first should shown when the user scrolled up i.e top 0

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.