What is Tweener?
Tweener is a JavaScript library for doing animations. It can smoothly interpolate numerical variables between two values over time. It is an implementation of Caurina tweener and has the same syntax. Tweener has more good properties:
-
Tweener uses window.requestAnimationFrame() function for animations, instead of classic
setTimeout()
. This new function of HTML5 makes animation fully synchronized with display redrawing frequency, everything will be very smooth. - Tweener is very small - it is under 15 kB (7 kB minified). Most of it are transition functions.
- Tweener is written very efficiently. Even intensive tweening does not drain CPU.
Tweener is located under a short URL http://tweener.ivank.net/tw.js
Documentation
- addTween(o:Object, params:Object)
-- time, delay, transition, onStart, onStartParams, onUpdate, onUpdateParams, onComplete, onCompleteParams
Usage
<script type="text/javascript" src="http://tweener.ivank.net/tw.js"></script> ... var o = {x:100, y:200}; Tweener.addTween(o, {x:400, y:500, time:2, delay:1, transition:"easeOutBounce"});
I can not guarantee availability of tw.js forever, 100% of time. Please, host it on your own server, if you plan to have thousands of pageloads a day.
There is a demo of using Tweener for animation.Discussion
Not all functionality of Caurina tweener is implemented in Tweener. If you want something new, or you find a bug, let me know.