Smooth is a small JavaScript module based on VirtualScroll to create smooth scrolling and parallax effects on scroll. It works both with fake scrollbars and native scrolling.

npm install smooth-scrolling

import Smooth from 'smooth-scrolling'

const section = document.querySelector('.vs-section')
const smooth = new Smooth({
  native: true,
  section: section,
  ease: 0.1
})

smooth.init()

• listener: on-scroll events listener & parent container for all elements
• direction : vertical or horizontal scrolling behavior
• native: use the default scrollbar
• section : the element to transform
• ease : the easing value (usually between 0 and 1)
• vs : you can pass some option for virtuall-scroll: limitInertia, mouseMultiplier, etc
• preload : if set to false, there will be no resize function called after all images loaded
• noscrollbar : if using virtual-scroll and set to true, it will not build a custom scrollbar

Will add all event listeners and DOM elements.

Will listen to either window scroll event (if native), otherwise VirtualScroll

Will stop listening to onscroll/wheel events.

Will remove all event listeners and DOM elements.

Basic scrollTo function.

import Smooth from 'smooth-scrolling'

class Custom extends Smooth {
    
    constructor(opt = {}) {
        
        super(opt)

        this.dom.section = opt.section
        this.dom.opacity = opt.opacity
    }
    
    run() {
        
        super.run()
        
        const current = Math.round(Math.abs(this.vars.current))
        const opacity = Math.max(0, Math.min(1 - current / (this.vars.height * .5), 1))
        
        this.dom.opacity.style.opacity = opacity.toFixed(2)
        this.dom.section.style[this.prefix] = this.getTransform(-this.vars.current.toFixed(2))
    }

    resize() {
        
        this.vars.bounding = this.dom.section.getBoundingClientRect().height - this.vars.height
        
        super.resize()
    }
}

export default Custom

// ...and later on
import Custom from './custom-smooth-scrolling'

const section = document.querySelector('.vs-section')
const opacity = document.querySelector('.vs-opacity')

const smooth = new Custom({
  section: section,
  opacity: opacity,
  ease: 0.1
})

smooth.init()

git clone [email protected]:baptistebriel/smooth-scrolling.git

cd smooth-scrolling/ && npm i && npm run dev

npm run demo-parallax

npm run demo-parallax-page

npm run demo-horizontal

npm run demo-native-horizontal

npm run demo-opacity

npm run demo-scale

npm run demo-split

npm run demo-performances

• etq.store
• femmefatale.paris
• buildin.amsterdam
• romainpsd.com
• flavinsky.com
• alisharaf.com
• bbriel.me
• studiochevojon.com
• andeinerseite.video
• eginstill.com
• blackballoon.fr
• & more to come!

If you didn't already read the tutorial, I highly recommend it. Smooth.js is basically what's explained on the blog post. I just needed a simple script to get things done without having to write lots of code every time I wanted to use this technique.

MIT, see LICENSE.md.