Kinetica

Unprecedented kinetic engine.

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