Getting started

High-performant animations without headaches

Quick Look
Installation
Commands
Demos
  • 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

File-reference installation

Download library JS and reference it's as below code

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

CDN-reference installation

ES6 Module installation

npm install es6-tween --save
# or
yarn add es6-tween
import { Easing, Tween, autoPlay } from 'es6-tween'

CommonJS (NodeJS) installation

npm install es6-tween --save
# or
yarn add es6-tween
const { Easing, Tween, autoPlay } = require('es6-tween')

GetLibs installation

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

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

Browsers
Envoriments
OS

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

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

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

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

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 :)

Our first and very good friend and sponsor is BrowserStack, thank you a lot for your goodness and support.

License

MIT License, see LICENSE