Transform Functions

The component covers most important 2D and 3D transform functions as described in the W3 specification, completelly reworked for improved performance and faster value processing.

3D Transform

• perspective function creates a 3D perspective for a target element transformation. EG. perspective:400 to apply a 400px perspective. IE10+
• translateX function is for horizontal translation. EG. translateX:150 to translate an element 150px to the right. IE10+
• translateY function is for vertical translation. EG. translateY:-250 to translate an element 250px towards the top. IE10+
• 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. IE10+
• translate3d function is for movement on all 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. IE10+
• 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. Requires perspective. IE10+
• 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. Requires perspective. IE10+
• rotateZ function rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. rotateZ:-150 will rotate an element counter-clockwise by 150 degrees on X axis. IE10+
• rotate3d is a tween property, which combines the above rotateX, rotateY, and rotateZ functions and rotates an element on all axes. Obviously this is NOT equivalent with the rotate3d(vectorX,vectorY,vectorZ,angle) shorthand function, this is only an optimization implemented for performance reasons and hopefully for your convenience. Eg. rotate3d:[-150,80,90] will rotate an element counter-clockwise by 150 degrees on X axis, 80 degrees on Y axis and 90 degrees on Z axis. The X and Y axis require a perspective. IE10+
• matrix3d and scale3d functions are not supported by this component, but they are implemented in the transformMatrix component.

2D Transform

• translate function is for movement on X and Y axis. EG. translate:[-150,200] to translate an element 150px to the left, 200px to the bottom. IE9+
• rotate function rotates an element on the Z axis. Eg. rotate:250 will rotate an element clockwise by 250 degrees. IE9+
• skewX function will apply a shear on X axis to a target element. Eg. skewX:50 will skew a target element on X axis by 50 degrees. IE9+
• skewY function will apply a shear on X axis to a target element. Eg. skewX:50 will skew a target element on X axis by 50 degrees. IE9+
• skew 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. IE9+
• 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

var tween1 = KUTE.fromTo('selector1',{translate:0},{translate:250}); // or translate:[x,y] for both axes
var tween2 = KUTE.fromTo('selector2',{translateX:0},{translateX:-250});
var tween3 = KUTE.fromTo('selector3',{translate3d:[0,0,0]},{translate3d:[0,250,0]});
var tween4 = KUTE.fromTo('selector4',{perspective:400,translateY:0},{perspective:200,translateY:-100});

As you can see in your browsers console, for all animations translate3d is used, as explained above. Also the first example that's using the 2D translate for both vertical and horizontal axis even if we only set X axis.

Rotations

var tween1 = KUTE.fromTo('selector1',{rotate:0},{rotate:-720});
var tween2 = KUTE.fromTo('selector2',{rotateX:0},{rotateX:200});
var tween3 = KUTE.fromTo('selector3',{perspective:100,rotate3d:[0,0,0]},{perspective:100,rotate3d:[0,160,0]});
var tween4 = KUTE.fromTo('selector4',{rotateZ:0},{rotateZ:360});

The rotateX and rotateY are 3D based rotations, so they require a perspective in order to make the browser render proper 3D layers, but in the example they animate different because only the second, Y axis, uses the perspective function. The rotation on Z axis does not require a perspective. Unlike translations, you can stack all axis rotation for your animation, but we will see that in a later example.

Skews

var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
var tween2 = KUTE.fromTo('selector2',{skew:[0,0]},{skew:[0,45]});

Mixed Transformations

The current specification does not support animating different transform properties with multiple tween objects at the same time, you must stack them all together into a single object. See the example below:

var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
var tween2 = KUTE.fromTo('selector1',{skewY:0},{skewY:45}).start();

If you check the test here, you will notice that only the skewY is going to work and no rotation. Now let's do this properly.

var tween1 = KUTE.fromTo(
  'selector1', // element
  {pespective:200,translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
  {pespective:200,translateX:250, rotateX:360, rotateY:15, rotateZ:5} // to
);
var tween2 = KUTE.fromTo(
  'selector2', // element
  {translateX:0, rotateX:0, rotateY:0, rotateZ:0}, // from
  {translateX:-250, rotateX:360, rotateY:15, rotateZ:5} // to
);

Note in this example, the first tween object uses the element's perspective while the second relies on the parent's perspective.

Chained Transformations

KUTE.js has the ability to stack transform functions in a way to improve performance and optimize your workflow. In that idea the .to() method can be the right choice for most of your animation needs and especially to link animations together because it has the ability to check the current values of the transform functions found in the element's inline styling, mostly from previous tween animation, and use them as start values for the next animation. OK now, let's see a side by side comparison with 4 elements:

Observations

• The example hopefully demostrates what the animation looks like with different combinations of transform functions and how to combine them to optimize your workflow, size on disk as well as to how to link animations together in a smooth continuous animation.
• No matter the input values, the component will always stack translations into translate3d and rotations into rotate3d.
• The first box uses a regular .fromTo() object, from point A to B and back to A, with the exact coordinates we want.
• The second box is also using .fromTo() object, but using all values for all tweens at all times, so we gave the animation a sense of continuity.
• The third box uses the .to() method, and will try and continue animation from last animation, but we "forgot" to keep track on the rotation of the X axis.
• The last box also uses the .to() method, and uses all values and reproduce the animation of the second box exactly, but with nearly half the code.

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.
• Tests reveal that an element's own perspective produce better performance than using the parent's perspective. Also having both will severelly punish the animation performance, so keep that in mind when you work on optimizing your code.
• Use single axis transform functions like translateX when you want to animate the Y and Z axes back to ZERO, but in a convenient way.
• Use shorthand functions like translate3d when you want to animate / keep multiple axes.
• Shorthand functions like translate3d or rotate3d tween property generally not only improve performance, but will also minimize the code size. Eg. translateX:150, translateY:200, translateZ:50 => translate3d:[150,200,50] is quite the difference.
• On larger amount of elements animating chains, the .fromTo() method is fastest, and you will have more work to do as well, but will eliminate any delay / syncronization issue that may occur.
• This component is bundled with the demo/src/kute-base.js and the standard kute.js distribution files.