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 = 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)

demos

Some demos:

• 3D rotation - source
• chained tweens - source
• stress test - source

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 details
• start 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 the rotation parameter

License

MIT, see LICENSE.md for details.