Lightweight Kinetic/Momentum Scroll Plugin - jQuery Kinetic

Kinetic is a small and configurable jQuery plugin which provides a smooth kinetic/momentum scrolling effect as you move a scrollable element with mouse drag or touch swipe. Based on the requestAnimationFrame for the cross-browser smooth scrolling effect.

How to use it:

1. Download and insert the JavaScript file jquery.kinetic.js after jQuery JavaScript library.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.kinetic.js"></script>

2. Call the function on a scrollable container you specify.

<div id="wrapper">
  <div id="inner">
    <img src="1.jpg">
  </div>
</div>

$('#wrapper').kinetic();

3. To config the Kinetic/Momentum scrolling effect, just pass the following options to the kinetic() function:

$('#wrapper').kinetic({

  // cursor style
  cursor: 'move',

  // enables decelerate
  decelerate: true,

  // uses hardware acceleration for iOS
  triggerHardware: false,

  // the number of pixels the mouse needs to move before the element starts scrolling
  threshold: 0,

  // enable x/y scrolling
  y: true,
  x: true,

  // animation speed
  slowdown: 0.9,

  // max velocity speed
  maxvelocity: 40,

  // FPS
  throttleFPS: 60,

  // inverts movement direction
  invert: false,

  // default CSS classes
  movingClass: {
    up: 'kinetic-moving-up',
    down: 'kinetic-moving-down',
    left: 'kinetic-moving-left',
    right: 'kinetic-moving-right'
  },
  deceleratingClass: {
    up: 'kinetic-decelerating-up',
    down: 'kinetic-decelerating-down',
    left: 'kinetic-decelerating-left',
    right: 'kinetic-decelerating-right'
  }

});

4. API methods.

// Start movement in the scroll container at a particular velocity.
$('#wrapper').kinetic('start', { velocity: -30, velocityY: -10 });

// Begin slowdown of any scrolling velocity in the container.
$('#wrapper').kinetic('end');

// Stop the scrolling immediately
$('#wrapper').kinetic('stop');

// Detach listeners and functionality from the wrapper
$('#wrapper').kinetic('detach');

// Re-attach listeners and functionality previously detached using the detach method
$('#wrapper').kinetic('attach');

Changelog:

2017-09-10

• v2.2.4

---

This awesome jQuery plugin is developed by davetayls. For more Advanced Usages, please check the demo page or visit the official website.