Slickscroll - A Lightweight JavaScript library for quick and painless momentum & parallax scrolling effects.

Last update: Dec 28, 2022

Overview

Slickscroll is a JavaScript library that makes momentum & parallax scrolling quick and painless

View Demo: slickscroll.musabhassan.com

Momentum Scrolling
Momentum Scrolling is the smooth and eased scrolling fancy websites have to allow the page to flow smoothly when scrolling.

Download & Setup

Download

Manually download from Releases, from the dist directory, or npm.

npm

npm install --save slickscrolljs

Setup

ES6 import

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

const slick = new slickScroll;

HTML script tag

<script src="slickscroll.min.js"></script>

<script type="text/javascript"> 
    var slick = new slickScroll.default;
</script>

Node require

const slickScroll = require('slickscrolljs');

const slick = new slickScroll.default;

Hello World

The hello world will apply the momentum scrolling to the element you specify.

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

The overflow property will be overridden with auto upon initialization. If you wish to change overflow to anything else, you must modify it after the initialization. Here is an example to hide overflow-x.

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

document.querySelector("body").style.overflowX = "hidden";

All the valid options aswell as documentation and Getting Started can be found in the docs directory.

Browser Support

Browser	Version
Chrome	61+
Edge	80+
IE	None
Firefox	48+
Opera	48+
Safari	13+

Contributors

Musab-Hassan

License

MIT license.

GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

Jan 8, 2023

Javascript library to create physics-based animations

Dynamics.js Dynamics.js is a JavaScript library to create physics-based animations To see some demos, check out dynamicsjs.com. Usage Download: GitHub

Jan 6, 2023

GreenSock's GSAP JavaScript animation library (including Draggable).

GSAP (GreenSock Animation Platform) Professional-grade animation for the modern web GSAP is a robust JavaScript toolset that turns developers into ani

Jan 5, 2023

simple JavaScript library to animate texts

Animated Texts Hi, this library is a simple javascript text animator Properties force type: number default: 300 start_delay_time type: number default:

Jan 11, 2022

:dizzy: TransitionEnd is an agnostic and cross-browser library to work with transitionend event.

TransitionEnd TransitionEnd is an agnostic and cross-browser library to work with event transitionend. Browser Support 1.0+ ✔ 4.0+ ✔ 10+ ✔ 10.5 ✔ 3.2+

Dec 21, 2022

Slide-element - A ~700 byte Promise-based library for animating elements with dynamic heights open & closed. Basically, a modern variant of jQuery's slideUp(), slideDown(), and slideToggle().

slide-element A tiny, accessible, Promise-based, jQuery-reminiscent library for sliding elements with dynamic heights open & closed. To see it in acti

Dec 12, 2022

Comments

Does not work at all?! _SS_wrapper does not update

I am struggling for hours now and even copied your code. I can see in my source code that _SS_wrapper and _SS_dummy is present in DOM but if i scroll, they inline css value do no update. What do i miss?! "z-index: 1; height: 100%; width: 100%; overflow: visible; top: 0px; left: 0px; position: sticky; transform: translate3d(0px, 0px, 0px);"

opened by nicmare 0

Releases(2.0.2)

2.0.2(Aug 26, 2022)
Omit slickscroll.momentumScroll and replace it with the SlickScroll class (Version Breaking)

Significant performance improvements

Compatible with asynchronous scrolling

Minor bug fixes

Source code(tar.gz)
Source code(zip)
1.3.2(Jan 31, 2022)
Major Bug Fixes

Source code(tar.gz)
Source code(zip)
1.3(Dec 30, 2021)
Major Performance Improvement

Dropped support for inView

Minor Bug Fixes

Source code(tar.gz)
Source code(zip)
1.2.3(Nov 21, 2021)
Bug Fixes

Performance Improvements

Full Changelog: https://github.com/Musab-Hassan/slickscrolljs/compare/1.2.0...1.2.3
Source code(tar.gz)
Source code(zip)
1.2.0(Sep 21, 2021)
Works with Svelte and React (others not tested)

DOM nodes directly assignable to offsets and fixedOffsets instead of just strings

Improved performance

Better scroll handling (doesn't effect EventListeners or DOM Structure)

Source code(tar.gz)
Source code(zip)
1.0.1(Apr 27, 2021)
First public release

Horizontal & Vertical parallax scrolling

Eased momentum scrolling

InView Listener

Source code(tar.gz)
Source code(zip)