Create Smooth Momentum Scrolling Effects – Butter.js

Category: Animation , Javascript | December 13, 2020
Author:BCJdevelopment
Views Total:5,196 views
Official Page:Go to website
Last Update:December 13, 2020
License:MIT

Preview:

Create Smooth Momentum Scrolling Effects – Butter.js

Description:

Butter.js is a plain JavaScript library that applies a smooth momentum scrolling (also called inertial rolling) to any scrollable elements on the web.

Inspired by luxy.js library. Use this library to bring an iOS scroll experience to your web app.

How to use it:

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

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

2. Add your scrollable element into a container with the ID of ‘butter’. That’s it.

<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 mobile devices. Default: false.

butter.init({
  cancelOnTouch: true
});

5. Set the damping factor. Default: 0.08

butter.init({
  wrapperDamper: 0.06
});

Changelog:

12/13/2020

  • minor update to getting scrollY

12/04/2020

  • checkResize added every frame

09/05/2020

  • added resize on window load

09/04/2020

  • resize fix

You Might Be Interested In:


One thought on “Create Smooth Momentum Scrolling Effects – Butter.js

  1. webdevripe2021

    If the page has a an anchor link, it will not work due to this js

    Reply

Leave a Reply