# tween-handy

> Simple tweening library.

Latest version **1.0.4** (published 2019-11-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install tween-handy
pnpm add tween-handy
yarn add tween-handy
bun add tween-handy
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-11-21 |
| First published | 2019-11-17 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | anderpang@foxmail.com |
| Maintainers | anderpang |
| Keywords | tween, animation |

## Links

- npm: https://www.npmjs.com/package/tween-handy
- Repository: https://github.com/anderpang/tween-handy
- Homepage: https://github.com/anderpang/tween-handy/
- Issues: https://github.com/anderpang/tween-handy/issues
- npm.io page: https://npm.io/package/tween-handy

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 1.0.4 (latest) — 2019-11-21
- 1.0.3 — 2019-11-21
- 1.0.2 — 2019-11-21
- 1.0.1 — 2019-11-17
- 1.0.0 — 2019-11-17

## README

# TweenHandy
Simple tweening library.

## Install

You can install it via npm:

```html
npm install tween-handy
```
## Use
typescript:
```ts
import TweenHandy from "tween-handy";
```
javascript:
```html
<script src="dist/TweenHandy.js"></script>
```

## Example
### Needed
```js
   function render(){
       requestAnimationFrame(render);
       TweenHandy.update();
   }
````
```js
   var tween=new TweenHandy(sprite);
       tween.to({x:100},500);
       tween.start();

   var tween=new TweenHandy(sprite,from)
             .to({x:100})
             .start();
   
   var tween=new TweenHandy(sprite)
             .from({x:750})
             .start();

   
```

```javascript
var sprite={
    x:100,
    y:100,
    scale:{
        x:1,
        y:1
    }
};
var tween = TweenHandy.from(sprite,{x:300},500)
    .to({y:500})
    .to({"scale.x":1.5},{
        duration:500,
        delay:500,
        easing:TweenHandy.Easing.Linear.None //function(percent:number):progress{}
    })
    .yoyo(true)
    .repeat(-1)
    .on("start",function(obj,progress){

    })
    .on("update",function(obj,progress){

    })
    .on("complete",function(obj){

    })
    .on("repeat",function(obj,repeat){

    })
    .on("next",function(obj,time){

    })
    .start();

```

```js
   var tween=new TweenHandy(sprite)
                 .form({
                     x:750,
                     y:80
                 });
       tween.start();
```

```js
   var tween=new TweenHandy(sprite)
                 .to({
                     x:750,
                     y:80
                 });
       tween.start();
```

## Static properties or methods
```js
   TweenHandy.to(sprite,obj,duration);
   TweenHandy.from(Sprite,obj,duration);

   TweenHandy.Easing;                  //Easing object

   TweenHandy.update();          
   TweenHandy.pause();                 //all tweens pause
   TweenHandy.play();                  //all tweens play
   TweenHandy.delay(callback,delay);

   TweenHandy.now();                   //current time
```

### Example
```js
   function render(){
       requestAnimationFrame(render);
       TweenHandy.update();
   }

   document.addEventListener("visibilitychange",function(){
       if(document.hidden){
           Transition.pause();
       }
       else{
           Transition.play();
       }
   },false);
```

## Events
start | update | complete | next | stop | repeat

## Methods
```js
  tween.to(obj);
  tween.from(obj);
  tween.yoyo(boolean);
  tween.repeat(int);     //-1 loop

  tween.start();
  tween.play();
  tween.pause();
  tween.stop();

  tween.update(timeStamp);
  
```

timeline: |--------------------|--------------------|

 .......  start() .........  pause()/play() .......   stop()


## Properties
```js
   tween.paused;       //read,true || false
```

## Easing
TweenHandy.Easing from tween.js
```js
Linear:{None: ƒ}

Quad:{In: ƒ, Out: ƒ, InOut: ƒ}

Cubic:{In: ƒ, Out: ƒ, InOut: ƒ}

Back:{In: ƒ, Out: ƒ, InOut: ƒ}

Bounce:{In: ƒ, Out: ƒ, InOut: ƒ}

Circ:{In: ƒ, Out: ƒ, InOut: ƒ}

Elastic:{In: ƒ, Out: ƒ, InOut: ƒ}

Expo:{In: ƒ, Out: ƒ, InOut: ƒ}

Quart:{In: ƒ, Out: ƒ, InOut: ƒ}

Quint:{In: ƒ, Out: ƒ, InOut: ƒ}

Sine:{In: ƒ, Out: ƒ, InOut: ƒ}
```


Thanks

---
_Source: https://npm.io/package/tween-handy · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._