The component to cover animation for most transform functions with improved performance and faster value processing.
-
The KUTE.js Transform Functions enables animation for the CSS3 transform style on Element targets on most modern browsers and specific legacy browsers.
+
The KUTE.js Transform Functions enables animation for the CSS3 transform style on Element targets on modern browsers. For specific legacy browsers there is another
+ component called Transform Legacy you will find in the source folders.
Starting with KUTE.js version 2.0, you can set the perspective function as a tween property, while you can still rely on a parent's perspective but for less performance.
All the previous perspective related options have been removed. The transform CSS3 property itself no longer uses preffixes like webkit, moz or ms since all major
browsers are standardized.
@@ -138,6 +139,8 @@
scale function will scale a target element on all axes. Eg. scale:1.5 will scale up a target element by 50%. IE9+
matrix is not supported by this component, but is implemented in the transformMatrix component.
+
As a quick note, all input values for translate, rotate or single axis translation, skew or rotation will be all stacked into translate3d,
+ skew and rotate3d respectivelly; this is to further improve performance on modern browsers.
Translations
@@ -254,6 +257,7 @@ var tween2 = KUTE.fromTo(
Notes
+ - This demo page should work with IE10+ browsers.
- The order of the transform functions/properties is always the same:
perspective, translation, rotation, skew, scale, this way we can prevent
jumpy/janky animations; one of the reasons is consistency in all transform based components and another reason is the order of execution from the draft for
matrix3d recomposition.
@@ -283,6 +287,7 @@ var tween2 = KUTE.fromTo(
+
diff --git a/demo/transformMatrix.html b/demo/transformMatrix.html
index 4e29255..6670644 100644
--- a/demo/transformMatrix.html
+++ b/demo/transformMatrix.html
@@ -171,20 +171,21 @@ let mx4 = KUTE.to('el4', { transform: { translate3d:[-50,-50,-50], rotate3d:[0,-
Notes
- - 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.
+ - 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.