Scroll Header Animation

The scroll-header-animation plugin is a GSAP -powered utility that manages the visibility of the fixed header as the user scrolls. It hides the header when scrolling down to maximize reading space and reveals it when scrolling up for easy access to navigation.

In development, it is implemented in assets/js/modules/scroll-header-animation.js and initialized automatically by assets/js/main.js.

Markup Requirements

To implement the scroll header animation, use the following data attributes:

• data-animated-scroll-header: Applied to the <header> element. This is the element that will be animated (hidden on scroll down, revealed on scroll up).
• data-main-container: Applied to the <main> element. The script uses this to calculate where to insert the header placeholder to maintain the document flow.

Markup Example

Below is a structural example of how to implement the scroll header animation, based on the implementation in the blog page:

<!-- The header element with the animation attribute -->
<header
  class="fixed top-0 right-0 left-0 z-50 py-4"
  data-animated-scroll-header
>
  <div class="container mx-auto px-4">
    <!-- Header content (logo, navigation, etc.) -->
  </div>
</header>
 
<!-- Navigation Overlay & Sheet (Optional but common) -->
<div data-mobile-nav-overlay></div>
<div data-mobile-nav-sheet></div>
 
<!-- Smooth wrapper and content for the main layout -->
<div id="smooth-wrapper">
  <div id="smooth-content">
    <!-- The main container attribute is required for placeholder insertion -->
    <main data-main-container>
      <!-- Page content -->
    </main>
  </div>
</div>

Demo Sample

View the complete code sample on any demo page.