Table of Contents

• Features
• Dependencies
• Install
• Usage
• Examples
• API
• Development

Features

• Designed with performance in mind
• Lightweight - 10.4 KB
• Mobile friendly - supports mouse events, touch events and pointer events

Dependencies

• Vectory

Install

Download dev or prod version and put it in your html

<script src="vendor/kinetic.min.js"></script>

Usage

// start the digest loop
requestAnimationFrame(function loop (t) {
  Kinetic.notify(t)
  requestAnimationFrame(loop)
})

// create kinetic instance
var kinetic = new Kinetic({
  el: document.body,
  Vector: Vector
})

// spawn it
Kinetic.spawn(kinetic)

// implement scroll
var $target = document.getElementById('container')

var position = new Vector(0, 0)

function scrollTo (position) {
  $target.style.transform = `translateY(${position.y}px)`
}

function isValidScroll (position) {
  return position.y <= 0 && position.y > -5000 + window.innerHeight
}

function scrollY (pointers) {
  if (pointers.length === 1) {
    var pointer = pointers[0]
    var next = position.add(pointer.delta)
    if (isValidScroll(next)) {
      scrollTo(next)
      position = next
    }
  }
}

// subscribe to kinetic
kinetic.subscribe(scrollY)

Examples

• All
• Scroll Y
• Scroll X
• Scroll XY

API

Development

Command | Description ------- | ----------- npm run check | Check standard code style by snazzy npm run build | Wrap source code in UMD by rollup npm run min | Minify code by UglifyJS