ButterJs: Create Smooth Momentum Scrolling Effects

ButterJs: Create Smooth Momentum Scrolling Effects

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
});

Author: BCJdevelopment

Official Page: GitHub

Download: Link

Fancy you stumbling on my piece of the internet. Bonjour!

My name is Anmol and I'm the Blogger-In-Chief of this joint & working as the Chief Technology Officer at Azoora, Inc. I'm putting up my views here trying to help creative solopreneurs, developers & designers build their business using the power of websites, apps & social media, this, is, my jam.

If you're looking to start your own online business with a professional high quality website or mobile app, just get in touch. I'd be more than happy to assist.

SKYPE | FACEBOOK | LINKEDIN | TWITTER | EMAIL

Leave a Comment

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