tween-css-transform
Tweens a DOM element using CSS matrix3d()
and 4x4 matrix interpolation (decomposition/recomposition). This allows for a smooth range of 3D rotations (using quaternions and spherical interpolation) without gimbal lock.
Typically used with tween-ticker or tweenr. Example:
var tweenr = var Transform = //you can specify transform stringsvar tween1 = tweenr //or you can "compose" a matrix with 3D componentsvar tween2 = tweenr //a "from-to" tween, tweens from given transform to its initial statevar tween3 = tweenr
demos
Some demos:
Usage
Transform(element[, opt])
Creates a new transform tween with the given options. These include:
duration
the time in seconds for this tween (default 0)delay
the delay before the tween should start, in seconds (default 0)ease
an easing equation, see tweenr docs for detailsstart
the starting transform for this tween. If not specified, the tween will compute the element's transformation matrix (may cause reflows)end
the ending transform for this tween. Also defaults to the element's computed transformation at the time the tween starts.
The start
and end
options can be a CSS string (like matrix()
, matrix3d()
, or a series of transform operations), or a 16-float array, or an object of components. If an object is specified, it will look for:
translation
the XYZ translation in pixels (default[0, 0, 0]
)scale
in XYZ (default[1, 1, 1]
)rotation
the euler XYZ-order rotation in radians (default[0, 0, 0]
)- if
quaternion
is specified (XYZW) it will override therotation
parameter
License
MIT, see LICENSE.md for details.