stantoxt/tweene

JavaScript Animation Proxy

Tweene - JS Animation Proxy - v0.5.10

Tweene is a JS library that helps to improve your favourite animation engine, allowing you to do more and better.

There are already a lot of good JavaScript animation libraries on the market, each one with specific features, strengths and weaknesses. Each programmer and each project have their specific requirements, so sometimes one library may be suitable while other times it could not.

Tweene is something different. It is an animation proxy: used as a wrapper of your chosen library, it may allow you to

• write animations easily, thanks to its versatile interface that adapts itself to your programming style
• gain extra features (play, pause, reverse, resume, restart and speed control, Timelines)
• switch easily from one library to another any time you want.

Currently it can work together with GSAP, Velocity.js, Transit (CSS Transitions) or jQuery.

Resources

• Features
• Documentation
• Examples

Getting started

To start using Tweene just include the script after your animation library of choice.

jsDelivr CDN provides free hosting for Tweene. You can simply replace the script URL with one of the minified files on jsDelivr like this:

<script src="//cdn.jsdelivr.net/tweene/VERSION_HERE/tweene-velocity.min.js"></script>

For more details, like version aliasing, please visit the README.

Alternatively, you can download the repository and host the files locally.

// use Tweene with GSAP
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="//cdn.jsdelivr.net/tweene/latest/tweene-gsap.min.js"></script>

// use Tweene with jQuery
<script src="//cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>;
<script src="//cdn.jsdelivr.net/tweene/latest/tweene-jquery.min.js"></script>
// or fetch all with a single HTTP request
<script src="//cdn.jsdelivr.net/g/jquery,tweene(tweene-jquery.min.js)"></script>

// use Tweene with Transit
<script src="//cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>;
<script src="//cdn.jsdelivr.net/jquery.transit/0.9.12/jquery.transit.min.js"></script>
<script src="//cdn.jsdelivr.net/tweene/latest/tweene-transit.min.js"></script>
// or fetch all with a single HTTP request
<script src="//cdn.jsdelivr.net/g/jquery,[email protected],tweene(tweene-transit.min.js)"></script>

// use Tweene with Velocity.js
<script src="//cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>;
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/tweene/latest/tweene-velocity.min.js"></script>
// or fetch all with a single HTTP request
<script src="//cdn.jsdelivr.net/g/jquery,[email protected],tweene(tweene-velocity.min.js)"></script>

// use Tweene with more then one library
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.transit/0.9.12/jquery.transit.min.js"></script>
<script src="//cdn.jsdelivr.net/velocity/1.2.2/velocity.min.js"></script>
<script src="//cdn.jsdelivr.net/tweene/latest/tweene-all.min.js"></script>

<script>
// set the default time unit you want to use
Tweene.defaultTimeUnit = 'ms'; // or 's'

// set the default driver you want to use
Tweene.defaultDriver = 'gsap'; // or one of 'transit', 'velocity', 'jquery'
</script>

Package managers

bower install tweene
or
npm install tweene

// use Tweene with more then one library
require('tweene');

// use Tweene with GSAP
require('tweene/gsap');

// use Tweene with jQuery
require('tweene/jquery');

// use Tweene with Transit
require('tweene/transit');

// use Tweene with Velocity.js
require('tweene/velocity');

Time unit

Tweene tries to accommodate your current programming habits, not to force you to change them. For this reason, you can configure the default time unit used to indicate durations and delays of your tweens, by changing the value of Tweene.defaultTimeUnit (accepted value: 's' or 'ms'). Since the GSAP library uses natively seconds as time unit, when you will use only that specific driver through tweene-gsap.min.js or require('tweene/gsap') please note that the predefined value of Tweene.defaultTimeUnit will be 's'. In all other cases, it defaults to 'ms'. However, you can change it any time you want and also on a single call basis. Check http://tweene.com/docs/#duration for more details.

Changelog

• 0.5.11 Fixed a label related issue.
• 0.5.10 Fixed bug in jQuery driver.
• 0.5.9 Fixed restart() procedure when timelines are paused.
• 0.5.8 Added addPause() method. Fixed events call order.
• 0.5.7 Fixed wrong link to Velocity.js homepage
• 0.5.6 Fixed require() return value. Roadmap added.
• 0.5.5 Added references for CDN hosting support.
• 0.5.4 Renamed some internal vars. Added more details in README and comments.
• 0.5.3 Renamed all files in lowercase. Fixed jQuery minimum version in package.json dependencies.
• 0.5.2 Added support for npm and bower.
• 0.5.1 Predefined transforms order: now transformations are applied always in the same order. Fixed some minor glitches with CSS transitions.
• 0.5.0 First public release

License

Tweene is available under Artistic License 2.0, check the LICENSE.txt inside the archive for details.

Animation libraries of your choice are not included and have their own license agreement.