Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gmrchk/kinet
Kind of a most lightweight animation library of all. Changes value with that spring effect, but keeps the rest to you.
https://github.com/gmrchk/kinet
Last synced: about 1 month ago
JSON representation
Kind of a most lightweight animation library of all. Changes value with that spring effect, but keeps the rest to you.
- Host: GitHub
- URL: https://github.com/gmrchk/kinet
- Owner: gmrchk
- License: mit
- Created: 2018-09-17T22:11:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-04T12:36:36.000Z (about 2 years ago)
- Last Synced: 2024-12-09T19:53:27.249Z (about 2 months ago)
- Language: JavaScript
- Homepage: https://gmrchk.github.io/kinet/
- Size: 403 KB
- Stars: 93
- Watchers: 4
- Forks: 11
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# Kinet
Kind of a most lightweight animation library of all. Kinet lets you animate with that spring effect so you can use the values wherever you need to.
## Installation
Include Kinet with scripts tag
```html
```
or with *npm* and *import*
```shell
npm install kinet --save
```
```javascript
// import needed modules from npm
import Kinet from 'kinet';
```
## Options
Kinet accepts several options defined as follows.
```javascript
var options = { option: "value" }
var kinet = new Kinet(options);
```
### friction
Recommended value 0-1. Default value is `0.3`.
### acceleration
Recommended value 0-1. Default value is `0.04`.
### initialValue
Sets the initial value of `current` and `target` variables in animated instances.
### names
Array of names (strings). Kinet creates animated instance for each name. Defaults to single `x` value in array.
### test
Function testing whether the animation has finished. Function gets and animated instance as an argument.
When test function returns false for all animated instances, Kinet stops the animation and sets values to target values.
```javascript
// default value
test: function (instance) {
return Math.abs(instance.current - instance.target) > 0.1;
}
```
## Methods
```javascript
var kinet = new Kinet({name: ["x", "y"]});
```
### set
Sets value of current and target of animated instance to required value without animating.
```javascript
var kinet = new Kinet();
kinet.set("x", 10); // sets to number 10
```
### animate
Animates value of current variable of animated instance to target value without animating.
```javascript
var kinet = new Kinet();
kinet.animate("x", 10); // animates to number 10
```
### on
Sets handler for event. Available events are `start` (called at start of animation), `end` (called at the end of animation) and `tick` (called for every tick of animation).
Tick is called with `requestAnimationFrame` as the `current` value progresses to `target` value.
```javascript
// init
var kinet = new Kinet();
// set handler
kinet.on('tick', function () {
// do something on every animation tick
});
```
### off
Removes handler.
```javascript
kinet.off('tick', handler); // removes single handler
kinet.off('tick'); // removes all handlers for 'tick' event
kinet.off(); // removes all handlers
```