Smooth Scroll

The core purpose of the smooth-scroll plugin is to enable a fluid, native-feeling smooth scrolling effect across all pages of the template. Powered by GSAP’s  ScrollSmoother , it transforms the standard scrollbar experience into a premium, buttery-smooth interaction that perfectly complements the template’s scroll-based animations.

As a byproduct of initializing ScrollSmoother, this plugin also automatically intercepts any anchor link clicks on the page and animate the scroll position smoothly to the target element.

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

Markup Requirements

To use the plugin, you must wrap all scrollable page content within specific wrapper elements. This structure is required by GSAP’s  ScrollSmoother  to work properly.

You simply must follow this structure:

1. A main wrapper div with id="smooth-wrapper".
2. An inner wrapper div with id="smooth-content".

Notes:

• All page content that needs to scroll smoothly must be placed inside #smooth-content.
• Any fixed position elements (like sticky headers, floating navs, or modals) should be placed outside of #smooth-wrapper to prevent them from moving with the page scroll.
• Anchor links (<a href="#id">) pointing to a valid ID on the same page will automatically benefit from smooth scrolling. The plugin targets all a[href^="#"]:not([href="#"]) elements and scrolls them to the correct offset.

Customizing overall scroll smoothness

By default, the global scroll smoothness amount is 2 seconds. You can override this globally by adding the optional data-smooth-scroll-amount attribute to the #smooth-wrapper element.

Customizing anchor scroll duration

By default, the smooth scroll animation takes 0.5 seconds to reach the target element. You can override this duration per-link by adding the optional data-smooth-scroll-duration attribute to the anchor tag.

Markup Example

Below is an example markup showing the fundamental structure required to enable the global smooth scroll effect on a page:

<!-- Fixed elements must go outside the smooth wrapper -->
<header class="fixed top-0 z-50">
  <nav class="hidden items-center gap-10 text-sm font-medium xl:flex" data-desktop-nav>
    <!-- Default behavior (0.5 seconds) -->
    <a href="#about" class="text-foreground transition-colors hover:text-foreground/70">
      About
    </a>
    
    <!-- Custom behavior: slower scroll (1.5 seconds) -->
    <a href="#contact" data-smooth-scroll-duration="1.5" class="text-foreground transition-colors hover:text-foreground/70">
      Contact
    </a>
  </nav>
</header>
 
<!-- Default behavior (2 seconds smoothness) -->
<div id="smooth-wrapper">
<!-- Or custom behavior: <div id="smooth-wrapper" data-smooth-scroll-amount="1.5"> -->
  <div id="smooth-content">
    <!---For smooth scroll to work as expected, all scrollable content should be inside #smooth-wrapper & #smooth-content. --->
 
    <main data-main-container>
      <!-- Page Content Goes Here -->
      <section id="about" class="container mx-auto px-4 py-10">
        <h2>About Us</h2>
        <p>This section will be scrolled to smoothly when the 'About' link is clicked.</p>
      </section>
      
      <!-- More sections... -->
    </main>
 
  </div>
</div>

Demo Example

You can experience the smooth scrolling behavior globally across any of the template demos.