Skip to content

dbuck/es6-tween

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

es6-tween

ES6 implementation of tween.js

size gzipsize CDNJS jsdelivr unpkg npmcdn NPM Version NPM Downloads license Travis tests Flattr this
NPM

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

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

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. Browser Stack Logo

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

About

ES6 version of tween.js

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 87.2%
  • TypeScript 11.7%
  • HTML 1.1%