8 Examples of Animated Headers on Scroll
But before going through our implementations, let’s examine eight examples of animated headers during scrolling. Be sure to scroll through the sites to see the effects!
Now that we’ve taken a bit of inspiration from live sites, let’s see some easy-to-follow tutorials that describe how to animate headers on scroll.
This popular demo demonstrates how to hide the page header when scrolling down the page, then reveal it when scrolling up. As a perk, we embed a Lottie animation that toggles the menu each time we scroll down.
In this exercise, we build a sticky header whose top part (the notification header bar) disappears on scrolling down and appears on scrolling up. This is an old-time classic UX trend, especially popular for eCommerce stores and its primary target is to notify visitors about promotions, delivery info, etc.
Moving forward in this exercise, we create a ready-to-use responsive header and animate its call-to-action button after a certain amount of scrolling. Useful if you want to catch your visitor’s eye during scrolling.
In this exercise, our fixed header gets shrunk after a certain amount of scrolling—a typical scenario when you want to keep it sticky on scroll yet with reduced height to leave room for the page content.
In this newest tutorial, the header disappears on scroll, then reappears smaller after a certain amount of scrolling. In terms of functionality, we switch the header’s position between absolute and fixed depending on the scrolling amount.
Hopefully, this list has given you enough inspiration to start building creative scroll header effects. Enjoy the demos, read the associated tutorials, and last but not least, be sure to follow Envato Tuts+ on CodePen for more creative pens!
If there’s any other header effect you’d like to see implemented, let us know via social media.
As always, thanks a lot for reading!