Momentum & Parallax Scrolling Library With Vanilla JavaScript – slickscroll.js

Preview:

Description:

A lightweight, configurable, open-source Momentum & Parallax Scrolling JavaScript library without third-party dependencies.

How to use it:

1. Install and import the library with NPM.

# NPM
$ npm i slickscrolljs --save

import slickScroll from 'slickscroll.es.min.js';

2. Initialize the library and you’re ready to go.

const slick = new slickScroll;

3. Apply the momentum scrolling effect to the entire document.

slick.momentumScroll({
  root: "body"
})

4. Specify the duration of the animation.

slick.momentumScroll({
  root: "body",
  duration: 800,
})

5. Available easing functions:

• easeInSine
• easeOutSine
• easeInOutSine
• easeInQuad
• easeOutQuad
• easeInOutQuad
• easeInCubic
• easeOutCubic
• easeInOutCubic
• easeInQuart
• easeOutQuart
• easeInOutQuart
• easeInQuint
• easeOutQuint
• easeInOutQuint
• easeInExpo
• easeOutExpo
• easeInOutExpo
• easeInCirc
• easeOutCirc
• easeInOutCirc

slick.momentumScroll({
  root: "body",
  easing: "easeOutQuart",
})

6. Apply a parallax scrolling effect to elements.

slick.momentumScroll({
  root: "body",
  offsets: [
    {
      element: ".parallax-element-1", speedY: 0.8
    },
    {
      element: ".parallax-element-2", speedY: 0.6
    },
    // ...
  ],
})

7. Set the fixed top offset in cases where you have sticky elements like header navigation.

slick.momentumScroll({
  root: "body",
  fixedOffsets: [
    ".site-header"
  ]
})

Changelog:

v2.0.2 (08/26/2022)

• Omit slickscroll.momentumScroll and replace it with the SlickScroll class
• Significant performance improvements
• Compatible with asynchronous scrolling
• Minor bug fixes

v1.3.2 (01/31/2022)

• Major Bug Fixes

v1.3.0 (12/30/2021)

• Major Performance Improvement
• Dropped support for inView
• Minor Bug Fixes

v1.2.3 (12/04/2021)

• Bug Fixes
• Performance Improvements

v1.2.2 (11/21/2021)

• Bug Fixes

v1.2.0 (09/21/2021)

• Working with frontend frameworks
• DOM nodes directly assignable to offsets and fixedOffsets
• Improved performance
• New way of handling scrolling (doesn’t destroy EventListeners)