Supported Libraries
GSAP
GSAP is by far the JavaScript animation platform with more features on the market.
Tweene API is largely inspired by GSAP, while it obviously do not cover all the aspects offered by the native one.
Despite the hard task, I have tried to add some little goodies to GSAP too through the integration with Tweene, namely: an easier way
to define different easing functions on a per-property basis without the need to manually write separated tweens (avoiding events duplication at the same time),
directional callbacks, dedicated timelines, "then" properties set, and a more versatile syntax - in my humble opinion - to define tweens and timelines.
A reasonable question could be:
"Why should I use Tweene with GSAP if it not covers all the great features offered natively by GSAP?
I totally agree, and for this reason the GSAP driver for Tweene offers a getNative() method that gives you back original GSAP
objects created internally by Tweene, so you could benefit both from Tweene's small features added and then from the full set of features offered by the native library.
jQuery
Despite the questionable performance offered by jQuery native animate() method, this library is still almost ubiquitous,
so we have covered it with a proper driver. If you want to benefit from the integration with Tweene, you need at least jQuery 1.8+.
As you probably already know, there is currently no native support for transform and 3D-transform in jQuery and it's not in
our mission to cover this issue. However, in order to make easier to switch from one library to another, in jQuery Tweene driver
we have made the choice to interpret x, y / translateX, translateY as left
and top properties. Also, for better performance and more unity with other libraries, with Tweene + jQuery every tween / timeline
raises just one set of events regardless the number of HTML elements involved, this differs from the native jQuery's common behavior.
Keep in mind that Tweene's control of the playhead honors expected easing only using cubic bezier based easing (we provide text shortcuts for all the commonly
used easing functions, so you don't have to provide bezier values manually, unless you want to).
Transit
Transit is a jQuery plugin that uses CSS Transition technology for the animation of HTML elements.
Due to this reason, it has been really challenging to achieve full control of tweens, that is one of the main goals of Tweene project.
In fact, while it is well known how to stop a CSS Transition during its run, the problem is resuming the tween honoring the originally
intended easing behavior, because applying simply the original easing to the residual part of the tween does not produce the expected
result. I think I have solved this problem with Tweene, you can judge the result by yourself taking a look at this example
or trying it on your pages.
Transit does not support per-property easings (CSS support them for all animatable properties with the exception of transformations, due to the
intrinsic compound nature of transform property, so it is basically a useless feature in real world scenarios), so Tweene will silently
ignore them in case you set them.
Velocity.js
Velocity.js it an animation engine born with the aim to achieve performance, scalability and UI dedicated features. The challenge here
was to add Tweene features without violate the philosophy and constraints of the original library, so basically without doing extra DOM queries.
We have solved this recycling Velocity internal computed values, so using Tweene with Velocity you will not get extra DOM queries.
Also, keep in mind that the loops behavior of Tweene differs from the original loops feature offered by Velocity.js. In the native version,
a loop is intended as a yoyo effect, so the animated elements go forward and backward on each loop iteration. Instead Tweene loops are intended
on all supported libraries as a restart of the tween (or timeline) from its starting state on each iteration, without altering the playhead
direction. However Tweene offers yoyo effect too, so there is only gain without pain.
As for the other libraries that lacks native support of pause() / resume() features, Tweene comply with the specified easing only if you pass to
it a cubic bezier based easing (or one of the provided text shortcuts), so you cannot count on it if you need to use spring or step easings.
Features Matrix
Please note that this list does not include all the features offered by each animation library, but only those related with Tweene's project. Please refer to libraries' own documentation for more details on each solution.
| Feature | GSAP | jQuery | Transit | Velocity.js |
|---|---|---|---|---|
| Feature | GSAP | jQuery | Transit | Velocity.js | Internal tweening technology | JavaScript Engine | JavaScript Engine | CSS Transitions | JavaScript Engine | Time Unit Tweene allows you to change it also on a per-value basis, like '300ms' or '1.4s' | Seconds ( editable with Tweene ) | Milliseconds ( editable with Tweene ) | Milliseconds ( editable with Tweene ) | Milliseconds ( editable with Tweene ) |
| Direct support for compound properties Accept from 1 to 4 space-separated values for properties like margin, padding, border-radius and so on... | ( native ) | ( Tweene ) | ( native ) | ( Tweene ) |
| Delay Ability to postpone the tween start by a fixed amount of time | ( native ) | ( Tweene ) | ( native, replaced by Tweene ) | ( native, replaced by Tweene ) |
| Loops and Infinite Loops Repeat tweens and timelines for a fixed amount of times or indefinitely | ( native ) | ( Tweene ) | ( Tweene ) | ( native ) |
| Yoyo effect Alternate direction between forward and backward on each loop iteration | ( native ) | ( Tweene ) | ( Tweene ) | ( replaced by Tweene ) |
| Cubic Bezier easing functions Accept an array of four values that defines the specific Bezier Curve | ( Tweene ) | ( Tweene ) | ( native ) | ( native ) |
| Per-property easing functions Specify different easing functions for some properties on the same tween | ( native support, enhanced by Tweene ) | ( native ) | ( native ) | |
| Tweens overlapping on different properties of the same target | ( native ) | ( native ) | ( native ) | |
| Feature | GSAP | jQuery | Transit | Velocity.js |
| Control actions play(), pause(), reverse(), resume(), restart() | ( native ) | ( Tweene ) | ( Tweene ) | ( Tweene ) |
| Speed change (time scale) Change the speed of the animation for effects like slow-motion or fast-forward | ( native ) | ( Tweene ) | ( Tweene ) | ( Tweene ) |
| Then Command Streamlined method for specify a set of properties' values to be applied after the tween completes. | ( Tweene ) | ( Tweene ) | ( Tweene ) | ( replaced by Tweene ) |
| Timelines Allow to organize easily complex sequences of tweens. You can nest Timelines in Timelines | ( native ) | ( Tweene ) | ( Tweene ) | ( Tweene ) |
| Dedicated Timelines Timelines linked with a single target, so you don't have to repeat it for every tween | ( Tweene ) | ( Tweene ) | ( Tweene ) | ( Tweene ) |
| Callbacks Invoke the specified function on a chosen position in the timeline | ( native ) | ( Tweene ) | ( Tweene ) | ( Tweene ) |
| Directional Callbacks Like normal Callbacks, plus you can specify the playhead direction, so the call will happen only in forward direction, backward direction or both (default behavior) | ( Tweene ) | ( Tweene ) | ( Tweene ) | ( Tweene ) |
| Define macros Register custom tweens callable with a name and optional parameters | ( Tweene ) | ( Tweene ) | ( Tweene ) | ( Native support for similar feature, not used in Tweene ) |
| Feature | GSAP | jQuery | Transit | Velocity.js |
| Complete Event | ( native ) | ( native ) | ( native ) | ( native ) |
| Begin Event | ( native ) | ( native ) | ( Tweene ) | ( native ) |
| Progress Event | ( native ) | ( native ) | ( Tweene ) | ( native ) |
| Reverse Event | ( native ) | ( Tweene ) | ( Tweene ) | ( replaced by Tweene ) |
| Loop Event | ( native ) | ( Tweene ) | ( Tweene ) | ( Tweene ) |
