es6-tween

ES6 implementation of tween.js

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();

Adversiting

• Backers will be show there
• The user @dalisoft is looking for job, you can contact to me via e-mail, or at Twitter

Lite version

You can use the Lite version of ES6 which lighter (9Kb minified, ~3Kb min&gzip), faster (10% faster executioin), simpler (like the original one), memory effecient and better (can tween second-level Objects/Array). Optimized for runtime performance, no-lag anymore. When you want building mobile apps that loading files from server, use Lite for better performance. Differences when using Lite:

• 2-times lighter size
• No Timeline instance
• No String tween support
• No Deep tween support (does 2-level)
• Uses original Interpolation instances for Bezier interpolation
• Faster performance and execution speed
• Memory effecient
• No more shims required
• No Plugins support
• No DOM Get/Set, Renderer instance/plugin/add-on support
• No full-Event system, just 3 event support (onStart, onUpdate, onComplete)
• No seek, reverse support
• No event fire when stop, pause, etc
• No *, /, % relatives support

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
• Demo #3 Timeline

Installation

Download the library and include it in your code:

<script src="js/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 both version Full and Lite

<!-- jsDelivr -->
<!-- Full -->
<script src="https://cdn.jsdelivr.net/npm/es6-tween"></script>

<!-- Lite -->
<script src="https://cdn.jsdelivr.net/npm/es6-tween/lite/Tween.min.js"></script>



<!-- unpkg -->
<!-- Full -->
<script src="https://unpkg.com/es6-tween"></script>

<!-- Lite -->
<script src="https://unpkg.com/es6-tween/lite/Tween.min.js"></script>


<!-- npmcdn -->
<!-- Full -->
<script src="https://npmcdn.com/es6-tween"></script>

<!-- Lite -->
<script src="https://npmcdn.com/es6-tween/lite/Tween.min.js"></script>

More advanced users might want to...

Using grunt

PR are welcome...

Using gulp

PR are welcome...

Using import

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

// Lite
import { Easing, Interpolation, Tween, autoPlay } from 'es6-tween/src/Tween.Lite'

Using getlibs

<script src="https://unpkg.com/getlibs"></script>
<script type="x-module">
// ES6
// Full
import { Easing, Tween, autoPlay } from 'es6-tween'

// Lite
import { Easing, Interpolation, Tween, autoPlay } from 'es6-tween/src/Tween.Lite'


// CommonJS
// Full
const { Tween, Easing, autoPlay } = require('es6-tween')

// Lite
const { Easing, Interpolation, Tween, autoPlay } = require('es6-tween/lite/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:

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

// Lite
const { Tween, Interpolation, Easing, autoPlay } = require('es6-tween/lite/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="dist/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

Documentation

• Original source: check out at here
• User guide
• Wiki page
• Compatiblity
• 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 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