# Getting started

{% tabs %}
{% tab title="Quick Look" %}

* 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

### Note

We already know what is tweening and why it's need, so there no need to describe it's, Google will do this if you want. **This library is not made as alternative to another libraries, it's has own pros and cons**
{% endtab %}

{% tab title="Installation" %}

### File-reference installation

[Download](https://unpkg.com/es6-tween) library JS and reference it's as below code

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

### CDN-reference installation

| CDN      | URL                                      |
| -------- | ---------------------------------------- |
| jsDelivr | <https://cdn.jsdelivr.net/npm/es6-tween> |
| unpkg    | <https://unpkg.com/es6-tween>            |
| npmCDN   | <https://npmcdn.com/es6-tween>           |

### ES6 Module installation

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

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

### CommonJS (NodeJS) installation

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

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

### GetLibs installation

```markup
<script src="https://unpkg.com/getlibs"></script>
<script type="x-module">
// ES6
import { Easing, Tween, autoPlay } from 'es6-tween'
// OR
// CommonJS
const { Tween, Easing, autoPlay } = require('es6-tween')
</script>
```

{% endtab %}

{% tab title="Commands" %}

```bash
# Compile production unminified build to local folder
yarn source # or: npm run source

# Minify production unminified and appends '.min.js'
yarn build # or: npm run build

# Compiling development build with watch/hot-reloading feature
yarn dev # or: npm run dev

# Triggering when publishing to NPM
yarn prepublishOnly # or: npm run prepublishOnly

# Generates documentation with JSDoc based on code comments
yarn doc # or: npm run doc

# Generates API.md with JSDoc based on code comments
yarn doc-md # or: npm run doc-md

# Testing with AVA test runner
yarn test # or: npm test

# Linting
yarn lint # or: npm run lint

# Fix linting erros where possible
yarn lint-fix # or: npm run lint-fix
```

{% endtab %}

{% tab title="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)
* See [examples](https://github.com/tweenjs/es6-tween/tree/master/examples) at GitHub
* Collection on the [Codepen](https://codepen.io/collection/DapBmv/)
  {% endtab %}
  {% endtabs %}

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

### Compatibility

{% tabs %}
{% tab title="Browsers" %}

| Browser | Recommended version |
| ------- | ------------------- |
| Chrome  | 65                  |
| Firefox | 55                  |
| Opera   | 14                  |
| IE      | 11                  |
| Edge    | 14                  |
| Safari  | 9                   |

***These versions is based on working demos, may support down to 6-years old browsers, but may require some polyfills***
{% endtab %}

{% tab title="Envoriments" %}

| Env     | Recommended version |
| ------- | ------------------- |
| Node.js | 8+                  |
| Worker  | See browsers tab    |
| Browser | See browsers tab    |

***These versions is based on working demos, may support down to 6-years old browsers, but may require some polyfills***
{% endtab %}

{% tab title="OS" %}

| OS      | Recommended version |
| ------- | ------------------- |
| iOS     | 11                  |
| Android | 7                   |
| Windows | 8.1                 |
| macOS   | 10.13 / High Sierra |
| Ubuntu  | 18.04               |

***These versions is based on working demos, may support down to 6-years old browsers, but may require some polyfills***
{% endtab %}
{% endtabs %}

### Project info

| Info name            | Value           |
| -------------------- | --------------- |
| Bundler              | Rollup          |
| Package managers     | NPM / Yarn      |
| Transpiler           | Babel           |
| Test runner          | AVA             |
| Headless test runner | Puppeteer       |
| CI                   | Travis CI       |
| Documentation        | jsDoc + Docdash |

Thanks to author of these libraries/frameworks/services.

### 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-map](https://github.com/cityseer/vue-mapbox-map)
* [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 :)

### Sponsor

Our first and very good friend and sponsor is [BrowserStack](https://browserstack.com), thank you a lot for your goodness and support.

### License

MIT License, see [LICENSE](https://github.com/tweenjs/es6-tween/blob/master/LICENSE)