Kinetica
Unprecedented kinetic engine.
Table of Contents
Features
- Designed with performance in mind
- Lightweight - 10.4 KB
- Mobile friendly - supports mouse events, touch events and pointer events
Dependencies
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
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 |