# component-tween

> Motion tween engine using 'ease'

Latest version **1.2.0** (published 2015-03-16) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2015-03-16 |
| First published | 2015-03-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 36 |
| Maintainers | tootallnate |
| Keywords | tween, tweening, animation |

## Links

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

## Dependencies (4)

- [component-type](https://npm.io/package/component-type.md) 1.1.0
- [ease-component](https://npm.io/package/ease-component.md) 1.0.0
- [component-clone](https://npm.io/package/component-clone.md) 0.2.2
- [component-emitter](https://npm.io/package/component-emitter.md) 1.2.0

## 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.2.0 (latest) — 2015-03-16

## README

# tween

  Motion tween component using [ease](https://github.com/component/ease).

## Installation

    $ component install component/tween

## Example

```js
var Tween = require('tween');
var raf = require('raf');
var button = document.querySelector('button');

var tween = Tween({ rotate: 0, opacity: 0 })
  .ease('out-bounce')
  .to({ rotate: 360, opacity: 1  })
  .duration(800);

tween.update(function(o){
  button.style.opacity = o.opacity;
  button.style.webkitTransform = 'rotate(' + (o.rotate | 0) + 'deg)';
});

tween.on('end', function(){
  animate = function(){};
});

function animate() {
  raf(animate);
  tween.update();
}

animate();
```

## API

### Tween(obj:Object|Array)

  Initialize a new `Tween` with `obj`.

### Tween#reset()

  Reset the tween.

### Tween#to(obj:Object|Array)

  Tween to `obj` and reset internal state.

     tween.to({ x: 50, y: 100 })

### Tween#duration(ms:Number)

  Set duration to `ms` [500].

### Tween#ease(fn:String|Function)

  Set easing function to `fn`.

     tween.ease('in-out-sine')

### Tween#update(fn:Function)

  Set update function to `fn` or
  when no argument is given this performs
  a "step".

### Tween#stop()

  Immediately stop the tween and emit "stop" and end" events. `tween.stopped`
  is then marked as `true`.

## License

  MIT

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