# es6-tween

> ES6 implementation of amazing tween.js

Latest version **5.5.11** (published 2020-03-03) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 5.5.11 |
| Published | 2020-03-03 |
| First published | 2017-02-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 370.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | es6-tween contributors |
| Maintainers | dalisoft |
| Keywords | tween, tweening, es6, numeric, interpolation, easing, emit |

## Links

- npm: https://www.npmjs.com/package/es6-tween
- Repository: https://github.com/tweenjs/es6-tween
- Homepage: https://es6-tween.js.org
- Issues: https://github.com/tweenjs/es6-tween/issues
- Funding: https://www.patreon.com/dalisoft
- npm.io page: https://npm.io/package/es6-tween

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 5.5.11 (latest) — 2020-03-03
- 5.5.10 — 2019-05-17
- 5.5.9 — 2019-05-17
- 5.5.8 — 2019-05-17
- 5.5.7 — 2019-05-17
- 5.5.6 — 2019-05-17
- 5.5.5 — 2019-05-16
- 5.5.4-alpha — 2019-05-16
- 5.5.4 — 2019-05-16
- 5.5.3 — 2019-05-08
- 5.5.2 — 2019-04-24
- 5.5.1 — 2019-04-24
- 5.5.0 — 2019-04-24
- 5.4.3 — 2019-04-10
- 5.4.2 — 2019-04-09
- … 112 more at https://npm.io/package/es6-tween/versions

## README

# es6-tween

- High-performant animations without headaches
- Simple, modular and functional animation library for web and node
- Tweening library that needs to use where performance matter
- Flexible, extendable, modular and resource-efficient tweening library

[![NPM Min Size][npm-min-size]][unpkg-url]
[![NPM Gzip Size][npm-gzip-size]][unpkg-url]
[![CDNJS][cdnjs-image]][cdnjs-url]
[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][npm-url]
[![license](https://img.shields.io/github/license/tweenjs/es6-tween.svg)]()
[![Travis tests][travis-image]][travis-url]
<br/>
[![NPM](https://nodei.co/npm/es6-tween.png?downloads=true&stars=true)](https://nodei.co/npm/es6-tween/)

## Note

This project is now entering into maintaining mode as no support from community and i don't have enough time to keep this project alive, maintain and add features. Bug-fixes also will be stopped. PR's are welcome.

You can make this project alive again with support by [became Patron](https://patreon.com/dalisoft)

> See "My Patreon" page "Goals" section for more info

## Frameworks

- [react-es6-tween](https://github.com/dalisoft/react-es6-tween)

## Docs

- [API documentation](./API.md)
- [Wiki page](https://github.com/tweenjs/es6-tween/wiki)

```javascript
TWEEN.autoPlay(true); // simplify the your code

let coords = { x: 0, y: 0 };
let tween = new TWEEN.Tween(coords)
  .to({ x: 100, y: 100 }, 1000)
  .on('update', ({ x, y }) => {
    console.log(`The values is x: ${x} and y: ${y}`);
  })
  .start();
```

## Plugins

Starting at `v3`, we provide excluded plugins from core, so our core becomes lighter and faster. [Here our plugins list](https://www.npmjs.com/browse/keyword/es6-tween)

## Demos

- Demo #1 [Morphing SVG Shape + Cross-browser SVG Transform](https://codepen.io/dalisoft/pen/mMJmxX)
- Demo #2 [Morphing SVG Shape](https://codepen.io/dalisoft/pen/BdLydv)
- Collection on the [Codepen](https://codepen.io/collection/DapBmv/)

## Installation

Download the [library](https://unpkg.com/es6-tween/bundled/Tween.js) and include it in your code:

```html
<script src="bundled/Tween.js"></script>
```

### CDN-Hosted version

- See [cdnjs-hosted version](https://cdnjs.com/libraries/es6-tween) for get which result you want
- NOTE: `@latest` suffix sometimes saves life by loading latest, because sometimes CDN services will not load the latest

- Now you can load from CDN

```html
<!-- jsDelivr -->
<script src="https://cdn.jsdelivr.net/npm/es6-tween"></script>

<!-- unpkg -->
<script src="https://unpkg.com/es6-tween"></script>

<!-- npmcdn -->
<script src="https://npmcdn.com/es6-tween"></script>
```

### More advanced users might want to

#### Using `import`

```javascript
import { Easing, Tween, autoPlay } from 'es6-tween';
```

#### Using [getlibs](https://github.com/activewidgets/getlibs)

```html
<script src="https://unpkg.com/getlibs"></script>
<script type="x-module">
  // ES6
  import { Easing, Tween, autoPlay } from 'es6-tween'


  // CommonJS
  const { Tween, Easing, autoPlay } = require('es6-tween')
</script>
```

#### Using `npm` or `yarn`

```bash
$ yarn add es6-tween
# or
$ npm install es6-tween
```

Then include the Tween.js module with the standard node.js `require`:

```javascript
const { Tween, Easing, autoPlay } = require('es6-tween');
```

And you can use Tween.js as in all other examples--for example:

```javascript
const t = new Tween(/* etc */);
t.start();
```

You can run script commands to build modules into single `UMD` compatible file:

#### Using commands

```bash
$ yarn build # builds production files
# or
$ yarn dev # builds and watchs development files
```

Then reference the library source:

```html
<script src="bundled/Tween.min.js"></script>
```

## Features

- Tweens everything you give them, string, number, number of arrays, number of object, all-to, interpolators and much more. Endless possibilites
- Can use CSS units (e.g. appending `px`)
- Can interpolate colours
- Easing functions are reusable outside of Tween
- Can also use custom easing functions
- Much of easings

## Compatiblity Testing

Thanks to BrowserStack for providing us testing in a real devices to make it cross-browser, bug-free and better.
BrowserStack saved my countless hours, before i spent on testing much of time, now it's very easy. I recommend to others use this service.
I sure, BrowserStack helps us to make it, so i am linking to BrowserStack as our sponsor.
[<img src="https://cloud.githubusercontent.com/assets/7864462/12837037/452a17c6-cb73-11e5-9f39-fc96893bc9bf.png" alt="Browser Stack Logo" width="400">](https://www.browserstack.com/)

## Tests

```bash
yarn test
```

or you can go [here](https://travis-ci.org/tweenjs/es6-tween) for more information, tests and etc...

every time you want to run the tests.

If you want to add any feature or change existing features, you _must_ run the tests to make sure you didn't break anything else. If you send a PR to add something new and it doesn't have tests, or the tests don't pass, the PR won't be accepted. See [contributing](CONTRIBUTING.md) for more information.

## People

- [All contributors](https://github.com/tweenjs/es6-tween/contributors).
- [es6-tween contributors](https://github.com/tweenjs/es6-tween/graphs/contributors)/

## Thanks to

these tools developers and to their community and without these tools maybe this library wouldn't be possible

- [GitHub](https://github.com/)
- [Travis CI](http://travis-ci.org)
- [BrowserStack](https://www.browserstack.com/)
- [Node.js](https://nodejs.org/en/)
- [ESLint](http://eslint.org)
- [jsDoc](http://usejsdoc.org) ([docdash theme](https://github.com/clenemt/docdash))
- [Rollup](https://rollupjs.org/guide/en)
- [Babel](https://babeljs.io)
- [Ava](https://github.com/avajs/ava)
- [Puppeteer](https://pptr.dev)
- [UglifyJS v3](https://github.com/mishoo/UglifyJS2)
- [Husky](https://github.com/typicode/husky)

## Projects using es6-tween

- [ft](https://github.com/2players/ft)
- [react-heartwood-components](https://www.npmjs.com/package/@sprucelabs/react-heartwood-components)
- [el-controls](https://github.com/eljs/el-controls)
- [lightweight-pixijs-engine](https://github.com/dgzornoza/lightweight-pixijs-engine#readme)
- [vue-sliderx](https://www.npmjs.com/package/vue-sliderx)
- [vue-mapbox-feature](https://cityseer.github.io/vue-mapbox-feature)
- [vuxtras](https://github.com/homerjam/vuxtras#readme)
- [Slye](https://github.com/Slye3D/slye#readme)
- [react-3d-globe](https://chrisrzhou.github.io/react-3d-globe/)

It's great to see this library to be used in production and/or library, thank you!

If you have projects using es6-tween, please make issue or PR, i will add here your project too :)

[npm-min-size]: https://img.shields.io/bundlephobia/min/es6-tween.svg
[npm-gzip-size]: https://img.badgesize.io/https://unpkg.com/es6-tween?compression=gzip
[npm-image]: https://img.shields.io/npm/v/es6-tween.svg
[npm-url]: https://npmjs.org/package/es6-tween
[downloads-image]: https://img.shields.io/npm/dm/es6-tween.svg
[travis-image]: https://travis-ci.org/tweenjs/es6-tween.svg?branch=master
[travis-url]: https://travis-ci.org/tweenjs/es6-tween
[cdnjs-image]: https://img.shields.io/cdnjs/v/es6-tween.svg
[cdnjs-url]: https://cdnjs.com/libraries/es6-tween
[unpkg-url]: https://unpkg.com/es6-tween

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