es6-tween

ES6 implementation of tween.js

What is tween?

Inbetweening or tweening is a key process in all types of animation, including computer animation. It is the process of generating intermediate frames between two images, called key frames, to give the appearance that the first image evolves smoothly into the second image. Inbetweens are the drawings which create the illusion of motion.

What means this in Javascript

Implementing tween in Javascript always has been hardly, especially in 2009-2012years, but there have been much of leaders, one of these GreenSock Animation Platform, shifty, CollieJS, CreateJS TweenJS and our tween.js.
The @sole, @mrdoob and other contributors did the job amazing and worked hardly to make web better, interactive and live

It's not tween.js!

Yes, we just implemented tween.js in ES6 for easier, understandable syntax to ES6 users and it's not successful as tween.js, but our users anyway uses this, it's awesome

Why another one, there a lot of tweening library?

Yes, why another? Just we want to create library while keeping balance between feature-set/flexibility, performance and size. It's not hard, but not easy too. We work for users who users, who STARRED (Thank you, you're amazing)

Alternatives

GSAP
kute.js
tween.js
TweenJS
animejs
Velocity.js
Shifty
jsAnim
MooFX
and a lot of these

But these alternatives

not all of them does support the extend-ability and does not perform as well. Each of these has own Pros/Cons, we create own idea, create

Plug-in/Extend-ability powered tweening library
Performant, Memory, Power and CPU effecient
Lower file-size for better load-time, it makes app faster and performant, nothing can change this

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

Demos

Demo #1 Morphing SVG Shape + Cross-browser SVG Transform
Demo #2 Morphing SVG Shape
Collection on the Codepen

Installation

Download the library and include it in your code:

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

CDN-Hosted version

See cdnjs-hosted version 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

<!-- 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 `grunt`

PR are welcome...

Using `gulp`

After package installed, go-to directory and then run:

if you want build, then $ gulp
if you want watch, then $ gulp watch

Using `import`

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

Using getlibs

<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`, `yarn` or `bower`

$ yarn add es6-tween
# or
$ npm install es6-tween
# or
$ bower install es6-tween

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

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

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

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

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

Using commands

$ npm run build # builds production files
# or
$ npm run dev # builds and watchs development files

Then reference the library source:

<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

All ES5 supported browsers including IE9+

Browsers

Chrome
Firefox 3.5+
Opera 9.5+
IE8+
Safari 5.1+

OS (Fully working)

Android 4.1+
iOS6+
WP8.5+
OS X
Windows 7+

Device

iPhone
iPad
Android devices
Nokia Lumia
Samsung devices
- all devices should compatible with supported OS

Package managers

bower
npm
yarn

Bundler

Rollup

Transpiler

Buble

Documentation

Original source: check out at here
Full documentation
API documentation
Wiki page
Tutorial using tween.js with three.js

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.

Examples

Demos with this version are not yet implemented, sorry.

Tests

npm test

or you can go here 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 for more information.

People

All contributors.

Thanks to:

es6-tween contributors
Rollup, Buble, Travis CI, BrowserStack, jsDoc, docdash theme, TypeScript and others (make issue, if i'm missed you) with their teams, devs and supporters

Projects using es6-tween

If you using our app and happy with this and share your app? Please make PR and we append to there your project

dbuck/es6-tween