# b-tween

> A simple but powerful tweening engine for Javascript.

Latest version **0.3.3** (published 2019-07-24) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2019-07-24 |
| First published | 2019-04-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 16 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 28 |
| Author | PengJiyuan |
| Maintainers | pjy |
| Keywords | tween, animation, javascript, motion, transform |

## Links

- npm: https://www.npmjs.com/package/b-tween
- Repository: https://github.com/PengJiyuan/b-tween
- Homepage: https://github.com/PengJiyuan/b-tween#readme
- Issues: https://github.com/PengJiyuan/b-tween/issues
- npm.io page: https://npm.io/package/b-tween

## 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

- 0.3.3 (latest) — 2019-07-24
- 0.3.2 — 2019-07-24
- 0.3.1 — 2019-07-24
- 0.3.0 — 2019-07-23
- 0.2.0 — 2019-04-09
- 0.1.1 — 2019-04-09
- 0.1.0 — 2019-04-09
- 0.0.1 — 2019-04-09

## README

# b-tween
A simple but powerful tweening engine for Javascript.

## Install

```bash
npm i b-tween
```

## Usage

#### ES Module

```js
import BTween from 'b-tween';
const tween = new BTween({
  from: {
    left: 0
  },
  to: {
    left: 700
  },
  duration: 500,
  easing: 'bounceOut',
  onUpdate: (keys) => {
    // You can do everything with keys
    block.style.left = keys.left + 'px';
  }
});
tween.start();
```

#### Commonjs

```js
const BTween = require('b-tween');
...
```

#### Browser

https://unpkg.com/b-tween/dist/b-tween.umd.js

```html
<script src="https://unpkg.com/b-tween/dist/b-tween.umd.js"></script>
<script>
  const tween = new BTween({
    ...
  });
  tween.start();
</script>
```

## Api

### new Tween(options)

#### options.from (object)

#### options.to (object)

#### options.duration (number)

#### options.delay (number)

#### options.easing (string)

* linear
* quadIn
* quadOut
* quadInOut
* cubicIn
* cubicOut
* cubicInOut
* quartIn
* quartOut
* quartInOut
* quintIn
* quintOut
* quintInOut
* sineIn
* sineOut
* sineInOut
* bounceIn
* bounceOut
* bounceInOut

#### options.onStart ( function(keys) {} )

#### options.onUpdate ( function(keys) {} )

#### options.onFinish ( function(keys) {} )

### Start Animation

```js
const tween = new Btween({...});
tween.start();
```

## LICENSE

[MIT](./LICENSE) © [PengJiyuan](https://github.com/PengJiyuan)

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