We are using this template in this article, download it or simply use your own
Navbar Animation used in a lot of website and we can say that it’s the first interaction designers and developer add to their websites. In this post we will fade in down and up the Navbar when the user scroll down and up (fade in down when user scroll down and fade it out when user scroll up).
When the user scroll down to the second section we want the Navbar to fade in down and in order to achieve that let’s select the second section (Content 2-2), under ACT panel click on Animation 1 to activate it, let’s change the trigger to Scroll and the target to our Navbar (if you select the Navbar you’ll noticed that it has
main-nav class we can use as our selector) .main-nav, we don’t want the animation to be so fast, so let’s change the duration to 1000 (that means 1 second). Under the ANIMATION STEPS change the Init state to
margin-top:-100px;opacity:0; (we want it to fade in from top to down) and Step 1 to
Note: we can use transform here but I’ll stick with the margin-top, don’t forget use your favorite
Going to the next section the SCROLL PROPERTIES section, let’s first check the Enable second trigger and that means we want it to fade in down every time the user scroll down to the second section, if we leave it unchecked the animation (fade in down) will work just one time. Change the Scroll direction to Down and the Scroll offset to 0 since we want the Navbar to appear when the user reach to this section.
Save the page and test it, what do you think?
Let’s fade it out up, so when the user scroll up outside the second section we want the Navbar to fade out, click on Animation 2 again change the trigger to Scroll, the target to .main-nav and the duration to 1000. Under the ANIMATION STEPS change the Step 1 to
margin-top:-100px;opacity:0; again we want it to fade out up. The SCROLL PROPERTIES section check the Enable second trigger change the Scroll direction to Up and set the Scroll offset equal to 100px so the animation will happened when the user scroll up outside the second section by 100px.
Save again test it again, AWESOME !