Getting started
High-performant animations without headaches
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
CDN
URL
ES6 Module installation
npm install es6-tween --save
# or
yarn add es6-tweenimport { Easing, Tween, autoPlay } from 'es6-tween'CommonJS (NodeJS) installation
npm install es6-tween --save
# or
yarn add es6-tweenconst { 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-fixDemo #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
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 :)
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
Last updated
Was this helpful?