KUTE.js Transform Matrix

Overview

The brand new component to enable complex transform animations of the future.

The KUTE.js Transform Matrix component covers animation for the CSS3 transform style on Element targets but with a different implementation.

The notation is a little different because we have a different supported functions/properties set, and the value processing function needs to differentiate the two components.
The 2D transform functions like rotate, translate or scale have been dropped to enable faster value processing and improved performance. The component is geared towards the future of web development with this very specific purpose in mind.
Most importantly we have the update function which implements the DOMMatrix() API for smooth animation at no performance cost, which is different from other libraries that use a webkitCSSMatrix polyfill and lose performance.
The script is robust, simple and light in size. It's simply a matter of taste when choosing between the two transform components.

The component was developed for more complex transform animations and comes with additional supported transform functions. According to the W3 draft, the DOMMatrix API will merge the fallback webkitCSSMatrix API and the SVGMatrix API together, so awesome is yet to come.

Due to execution complexity and other performance considerations, and similar to the Transform Functions component, this component provides support for a custom rotate3d[X,Y,Z] tween property which is different from CSS3 standard rotate3d(x,y,z,Angle) shorthand function.

In certain situations you can also use functions like scaleX, rotateY or translateZ for convenience, but the component will always stack translations into translate3d, all scale axes into scale3d, all rotations into rotate3d and both skews into skew.

3D Transform

perspective function creates a 3D perspective for a target element transformation. EG. perspective:400 to apply a 400px perspective.
translateX function is for horizontal translation. EG. translateX:150 to translate an element 150px to the right.
translateY function is for vertical translation. EG. translateY:-250 to translate an element 250px towards the top.
translateZ function is for translation on the Z axis in a given 3D field. EG. translateZ:-250 to translate an element 250px away from the viewer, making it appear smaller. This function can be combined with the perspective function to take effect or the parent's perspective; the smaller perspective value, the deeper translation.
translate3d shorthand function is for translation on all the axes in a given 3D field. EG. translate3d:[-150,200,150] to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer, making it larger. When third value is used, it requires using a perspective.
rotateX function rotates an element on the X axis in a given 3D field. Eg. rotateX:250 will rotate an element clockwise by 250 degrees on X axis. Requires perspective.
rotateY function rotates an element on the Y axis in a given 3D field. Eg. rotateY:-150 will rotate an element counter-clockwise by 150 degrees on Y axis. Requires perspective.
rotateZ function rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:90 will rotate an element clockwise by 90 degrees on Z axis.
rotate3d is a tween property, which combines the above rotateX, rotateY, and rotateZ functions and rotates an element on all axes. Eg. rotate3d:[250,-150,90] will produce the same effect as the three above combined. The X and Y axes require a perspective.
skewX function will apply a shear to a target element on the X axis. Eg. skewX:50 will skew the element by 50 degrees on X axis.
skewY function will apply a shear to a target element on the Y axis. Eg. skewY:-50 will skew the element by -50 degrees on Y axis.
skew shorthand function will apply a shear on both X and Y axes to a target element. Eg. skew:[50,50] will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.
scaleX function will scale the X axis of a target element. Eg. scaleX:1.5 will increase the scale of a target element on the X axis by 50%.
scaleY function will scale the Y axis of a target element. Eg. scaleY:0.5 will decrease the scale of a target element on the Y axis by 50%.
scaleZ function will scale the Z axis of a target element. Eg. scaleZ:0.75 will decrease the scale of a target element on the Z axis by 25%.
scale3d function will scale a target element on all axes. Eg. scale3d:[1.5,0.5,0.75] will produce the same effect as the 3 above combined.
matrix and matrix3d are not supported CSS3 transform functions or tween properties, but the results of the update function.

Example

Now let's have a look at the notation and a quick example:

let mx1 = KUTE.to('el1', { transform: { translate3d:[-50,-50,-50]} })
let mx2 = KUTE.to('el2', { transform: { perspective: 100, translateX: -50, rotateX:-180} })
let mx3 = KUTE.to('el3', { transform: { translate3d:[-50,-50,-50], skew:[-15,-15]} })
let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-360,0], scaleX:0.5 } })

MX1

MX2

MX3

MX4

Start

So the second element uses it's own perspective but notice that the parent perspective also apply. This case must be avoided in order to keep performance in check: one perspective is best.

Chained Transformations

Similar to the other component the Transform Matrix component will produce the same visual experience, but with the matrix3d function.

FROMTO

Start

Notes

This demo page should work with IE10+ browsers.
Why no support for the matrix3d function? Simple: we can of course interpolate 16 numbers super fast, but we won't be able to rotate on any axis above 360 degrees. As explained here, surely for performance reasons the browsers won't try and compute angles above 360 degrees, but simplify the number crunching because a 370 degree rotation is visualy identical with a 10 degree rotation.
The component does NOT include any scripting for matrix decomposition/unmatrix, after several years of research I came to the conclusion that there is no such thing to be reliable. Such a feature would allow us to kick start animations directly from matrix3d string/array values, but considering the size of this component, I let you draw the conclusions.
Despite the "limitations", we have some tricks available: the fromTo() method will never fail and it's much better when performance and sync are a must, and for to() method we're storing the values from previous animations to have them ready and available for the next chained animation.
The performance of this component is identical with the Transform Functions component, which is crazy and awesome, all that thanks to the DOMMatrix API built into our modern browsers. If that's not good enough, the API will automatically switch from matrix3d to matrix and vice-versa whenever needed to save power. Neat?
The rotate3d property makes alot more sense for this component since the DOMMatrix rotate(angleX,angleY,angleZ) method works exactly the same, while the rotate3d(vectorX,vectorY,vectorZ,angle) function is a thing of the past, according to Chris Coyier nobody use it.
Since the component fully utilize the DOMMatrix API, with fallback to each browser compatible API, some browsers still have in 2020 an incomplete CSS3Matrix API, for instance privacy browsers like Tor won't work with rotations properly for some reason, other proprietary mobile browsers may suffer from same symptoms. In these cases a correction polyfill is required.
This component is bundled with the demo/src/kute-extra.js distribution file.