tweens a CSS transform (matrix3d)
npm install 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:
``js
var tweenr = require('tweenr')()
var Transform = require('tween-css-transform')
//you can specify transform strings
var tween1 = Transform(element, {
duration: 1,
delay: 0.5,
ease: 'expoOut',
start: 'translateX(10px) rotateX(90deg)'
end: 'matrix(1,0,0,1,0,0)'
})
tweenr.to(tween1)
//or you can "compose" a matrix with 3D components
var tween2 = Transform(element, {
duration: 1,
delay: 2,
end: {
rotation: [0, Math.PI/2, 0],
translation: [25, 15, 50],
scale: [1, 1.25, 1.5]
}
})
tweenr.to(tween2)
//a "from-to" tween, tweens from given transform to its initial state
var tween3 = Transform(foobar, {
duration: 1,
start: 'translateX(25px)'
})
tweenr.to(tween3)
`
Some demos:
- 3D rotation - source
- chained tweens - source
- stress test - source

#### 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]) quaternion
- if is specified (XYZW) it will override the rotation` parameter
MIT, see LICENSE.md for details.