JavaScript Animation Proxy
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. We don't want to encourage you to change your favourite library, and we have not written another one of them.
Tweene [twiːni] is something different. It is an animation proxy: used as a wrapper of your chosen library, it may allow you to do more and better and it makes easy to switch from one library to another any time you want. Currently it can work together with GSAP, Velocity.js, Transit (CSS transitions) or jQuery.
-
One API to rule them all
Switching to another library and learning a new interface takes a lot of time.
Is it 'x' or 'translateX'? Do I have to pass time values in seconds or ms?
Never mind anymore! Tweene handles all this stuff for you with a versatile interface that adapts itself to your needs and programming style. You could potentially run a desktop version with one library and the mobile version with another one with NO changes at all in your animation code.
-
Timelines to the masses
Through Tweene we have added Timeline feature to all supported libraries (only GSAP has native support for it), a powerful and easy way for organize your animation sequencing.
- No more deep nesting of code inside complete callbacks
- No more going mad with promises
- No more
setTimeout
garbage in your code
Organize your sequence like a boss with Tweene timelines.
-
Power is nothing without control
With Tweene you have now
play()
,pause()
,resume()
,reverse()
andrestart()
methods for all supported libraries, for both tweens and timelines.
You can also control CSS Transition based tweens, honoring easing.You can change the speed too while running, gaining great slow-mo or fast-forward effects.
And more...
To, From and FromTo tweens, loops and infinite loops, yoyo effect, delay and loops delay, callbacks and directional callbacks, full set of
events (start
, repeat
, complete
, reverse
and progress
),
register macros for common actions, easy syntax for property-based easing, generic or single target dedicated timelines, easy benchmarking of different
libraries performance using the same code for all. Check Docs and Examples for a full list of
features or take a look directly at source code on GitHub.
Demos
Download
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.
You can also use it with package managers:
npm install tweene or bower install tweene