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