Smooth Scroll

Customization	Reference
Edit options in	📄 HTML/js/app.js
Options object	🔧 app.options.smoothScroll
Component source	📄 HTML/js/components/Scroll.js
Component source (Gulp)	📄 SOURCE/components/scroll/Scroll.js

Default Options

window.app = {
  options: {
    // other options
    smoothScroll: {
      enabled: true,
      duration: 1.2,
      easing: gsap.parseEase('expo.out'),
      useGSAPRaf: true
    }
  }
}

HTML Markup

This component doesn't require any specific HTML markup.

Customization

1. Enabling Native Scrolling

Set the enabled option key to false to disable smooth scrolling. This will also offload the dependent smooth scrolling library.

smoothScroll: {
  enabled: false,
  duration: 1.2,
  easing: gsap.parseEase('expo.out'),
  useGSAPRaf: true
}

2. Adjusting Smooth Scrolling Inertia

Modify the duration option, which accepts float numbers. The higher the value, the more inertia effect will be applied when you release the scrolling wheel, and vice versa.

smoothScroll: {
  enabled: true,
  duration: 2.4,
  easing: gsap.parseEase('expo.out'),
  useGSAPRaf: true
}