https://github.com/broadsw0rd/kinetica

Unprecedented kinetic engine
https://github.com/broadsw0rd/kinetica

drag-and-drop kinetic scroll swipe

Last synced: about 1 month ago
JSON representation

Unprecedented kinetic engine

• Host: GitHub
• URL: https://github.com/broadsw0rd/kinetica
• Owner: broadsw0rd
• License: mit
• Created: 2015-12-06T19:00:19.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2022-02-12T02:26:15.000Z (almost 3 years ago)
• Last Synced: 2024-10-02T09:19:05.765Z (about 1 month ago)
• Topics: drag-and-drop, kinetic, scroll, swipe
• Language: JavaScript
• Homepage:
• Size: 188 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
Kinetica

Unprecedented kinetic engine.



	

    

  

  

    

  

  

    

  



## Table of Contents

- [Features](#features)

- [Dependencies](#dependencies)

- [Install](#install)

- [Usage](#usage)

- [Examples](#examples)

- [API](#api)

- [Development](#development)

## Features

- Designed with performance in mind

- Lightweight - [10.4 KB](https://github.com/broadsw0rd/kinetica/blob/master/dist/kinetic.min.js)

- Mobile friendly - supports mouse events, touch events and pointer events

## Dependencies

- [Vectory](https://www.npmjs.com/package/vectory)

## Install

Download [dev](https://rawgit.com/broadsw0rd/kinetica/master/dist/kinetic.js) or [prod](https://rawgit.com/broadsw0rd/kinetica/master/dist/kinetic.min.js) version and put it in your html

```html

```

## Usage

```js

// 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](https://codepen.io/collection/AMJybY/)**

- [Scroll Y](https://codepen.io/broadsw0rd/full/rzgamQ)

- [Scroll X](https://codepen.io/broadsw0rd/full/OjYXVG)

- [Scroll XY](https://codepen.io/broadsw0rd/full/QMREGj)

## API

## Development

Command | Description

------- | -----------

`npm run check` | Check standard code style by [snazzy](https://www.npmjs.com/package/snazzy)

`npm run build` | Wrap source code in [UMD](https://github.com/umdjs/umd) by [rollup](http://rollupjs.org/)

`npm run min` | Minify code by [UglifyJS](https://github.com/mishoo/UglifyJS)