Press "Enter" to skip to content

How to Create Smooth Momentum Scrolling Effects | Butter.js

Smooth Momentum Scrolling Effects – Butter.js is a regular JavaScript library that applies smooth scrolling momentum to any scrollable elements on the web.

This library is meant to be a lightweight momentum scroll library. For this reason, it does not currently support single parallax elements.

How to make use of it:

1. Download and import the butter.js library into the doc.

<script src="./butter.js"></script>

2. Add your scrollable factor right into a container with the ID of ‘butter’.

<div id="butter">
  List Or Grid Item 1
  List Or Grid Item 2
  List Or Grid Item 3
  ...
</div>

3. Override the default wrapper ID.

butter.init({
  wrapperId: 'butter'
});

4. Disable the Momentum Scrolling Effects on cellular units.

butter.init({
  cancelOnTouch: true
});

5. Set the damping issue.

butter.init({
  wrapperDamper: 0.06
});

Smooth Momentum Scrolling Effect with jQuery, Momentum Scrolling In Vanilla JavaScript, Butter.js Plugin/Github


See Demo And Download

Official Website(BCJdevelopment): Click Here

This superior jQuery/javascript plugin is developed by BCJdevelopment. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *