Getting started

High-performant animations without headaches

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

Installation

File-reference installation

Download library JS and reference it's as below code

<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

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>

Commands

# 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

Demos

• Demo #1 Morphing SVG Shape + Cross-browser SVG Transform
• Demo #2 Morphing SVG Shape
• See examples at GitHub
• Collection on the Codepen

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

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

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

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

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
• react-heartwood-components
• el-controls
• lightweight-pixijs-engine
• vue-sliderx
• vue-mapbox-map
• vuxtras
• Slye
• 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, thank you a lot for your goodness and support.

License

MIT License, see LICENSE