<aclass="facebook-link"target="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook">
<aclass="twitter-link"target="_blank"href="https://twitter.com/intent/tweet?text=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter">
<pclass="condensed lead">The component covers most important 2D and 3D <i>transform</i> functions as described in the <ahref="http://www.w3.org/TR/css3-transforms/"target="_blank">W3 specification</a>,
completelly reworked for improved performance and faster value processing.</p>
<pclass="condensed text-right">The component to cover animation for most <b>transform</b> functions with improved performance and faster value processing.</p>
</div>
<divclass="col9 border">
<pclass="lead condensed">The KUTE.js <b>Transform Functions</b> enables animation for the CSS3 <b>transform</b> style on <b>Element</b> targets on modern browsers. For specific legacy browsers there is another
component called <b>Transform Legacy</b> you will find in the source folders.</p>
<p>Starting with KUTE.js version 2.0, you can set the <b>perspective</b> function as a tween property, while you can still rely on a parent's perspective but for less performance.</p>
<p>All the previous perspective related options have been removed. The <b>transform</b> CSS3 property itself no longer uses preffixes like <b>webkit</b>, <b>moz</b> or <b>ms</b> since all major
browsers are standardized.</p>
<p>In comparison with previous versions, the component expects that input values are already <b>px</b> and <b>deg</b> based and no longer transforms <b>%</b> percent based values into <b>px</b> based or <b>rad</b>
based angles into <b>deg</b> based. This makes the execution faster and more consistent.</p>
<p>The component will stack all transform functions for translations, rotations and skews to shorthand functions to optimize performance and minimize value processing.</p>
<li><kbdclass="bg-blue">perspective</kbd> function creates a 3D perspective for a target element transformation. EG. <code>perspective:400</code> to apply a 400px perspective. <kbdclass="bg-lime">IE10+</kbd></li>
<li><kbdclass="bg-blue">translateX</kbd> function is for horizontal translation. EG. <code>translateX:150</code> to translate an element 150px to the right. <kbdclass="bg-lime">IE10+</kbd></li>
<li><kbdclass="bg-blue">translateY</kbd> function is for vertical translation. EG. <code>translateY:-250</code> to translate an element 250px towards the top. <kbdclass="bg-lime">IE10+</kbd></li>
<li><kbdclass="bg-blue">translateZ</kbd> function is for translation on the Z axis in a given 3D field. EG. <code>translateZ:-250</code> to translate an element 250px away from the viewer, making it
appear smaller. This function can be combined with the <code>perspective</code> function to take effect or the parent's perspective; the smaller perspective value, the deeper translation. <kbdclass="bg-lime">IE10+</kbd></li>
<li><kbdclass="bg-blue">translate3d</kbd> function is for movement on all axes in a given 3D field. EG. <code>translate3d:[-150,200,150]</code> 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 <code>perspective</code>. <kbdclass="bg-lime">IE10+</kbd></li>
<li><kbdclass="bg-blue">rotateX</kbd> function rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees. Requires perspective.
<kbdclass="bg-lime">IE10+</kbd></li>
<li><kbdclass="bg-blue">rotateY</kbd> function rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees.
<li><kbdclass="bg-blue">rotateZ</kbd> function rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:-150</code> will rotate an element counter-clockwise by 150 degrees on X axis.
<kbdclass="bg-lime">IE10+</kbd></li>
<li><kbdclass="bg-blue">rotate3d</kbd> is a <b>tween property</b>, which combines the above <code>rotateX</code>, <code>rotateY</code>, and <code>rotateZ</code> functions and rotates an element on all axes. Obviously this is NOT
equivalent with the <code>rotate3d(vectorX,vectorY,vectorZ,angle)</code> shorthand function, this is only an optimization implemented for performance reasons and hopefully for your convenience.
Eg. <code>rotate3d:[-150,80,90]</code> 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 <code>perspective</code>.
<kbdclass="bg-lime">IE10+</kbd></li>
<li><kbdclass="bg-red">matrix3d</kbd> and <kbdclass="bg-red">scale3d</kbd> functions are not supported by this component, but they are implemented in the <ahref="transformMatrix.html">transformMatrix</a> component.</li>
<li><kbdclass="bg-blue">translate</kbd> function is for movement on X and Y axis. EG. <code>translate:[-150,200]</code> to translate an element 150px to the left, 200px to the bottom. <kbdclass="bg-lime">IE9+</kbd></li>
<li><kbdclass="bg-blue">rotate</kbd> function rotates an element on the Z axis. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees. <kbdclass="bg-lime">IE9+</kbd></li>
<li><kbdclass="bg-blue">skewX</kbd> function will apply a shear on X axis to a target element. Eg. <code>skewX:50</code> will skew a target element on X axis by 50 degrees. <kbdclass="bg-lime">IE9+</kbd></li>
<li><kbdclass="bg-blue">skewY</kbd> function will apply a shear on X axis to a target element. Eg. <code>skewX:50</code> will skew a target element on X axis by 50 degrees. <kbdclass="bg-lime">IE9+</kbd></li>
<li><kbdclass="bg-blue">skew</kbd> function will apply a shear on both X and Y axes to a target element. Eg. <code>skew:[50,50]</code> will skew a target element on X axis by 50 degrees and 50 degrees on Y axis.
<kbdclass="bg-lime">IE9+</kbd></li>
<li><kbdclass="bg-blue">scale</kbd> function will scale a target element on all axes. Eg. <code>scale:1.5</code> will scale up a target element by 50%. <kbdclass="bg-lime">IE9+</kbd></li>
<li><kbdclass="bg-red">matrix</kbd> is not supported by this component, but is implemented in the <ahref="transformMatrix.html">transformMatrix</a> component.</li>
</ul>
<p>As a quick note, all input values for <kbdclass="bg-blue">translate</kbd>, <kbdclass="bg-blue">rotate</kbd> or single axis translation, skew or rotation will be all stacked into <kbdclass="bg-blue">translate3d</kbd>,
<kbdclass="bg-blue">skew</kbd> and <kbdclass="bg-blue">rotate3d</kbd> respectivelly; this is to further improve performance on modern browsers.</p>
<p>As you can see in your browsers console, for all animations <code>translate3d</code> is used, as explained above. Also the first example that's using the 2D <code>translate</code> for both vertical
and horizontal axis even if we only set X axis.</p>
<p>The <code>rotateX</code> and <code>rotateY</code> 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
<code>perspective</code> 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.</p>
<p>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:</p>
<p>If you check the <ahref="http://codepen.io/thednp/pen/avZrYo"target="_blank">test here</a>, you will notice that only the <code>skewY</code> is going to work and no rotation. Now let's do this properly.</p>
<p>KUTE.js has the ability to stack transform functions in a way to improve performance and optimize your workflow. In that idea the <code>.to()</code> 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:</p>
<li>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.</li>
<li>No matter the input values, the component will always stack translations into <code>translate3d</code> and rotations into <code>rotate3d</code>.</li>
<li>The first box uses a regular <codeclass="bg-gray">.fromTo()</code> object, from point A to B and back to A, with the exact coordinates we want.</li>
<li>The second box is also using <codeclass="bg-olive">.fromTo()</code> object, but using all values for all tweens at all times, so we gave the animation a sense of continuity.</li>
<li>The third box uses the <codeclass="bg-gray">.to()</code> method, and will try and continue animation from last animation, but we "forgot" to keep track on the rotation of the X axis.</li>
<li>The last box also uses the <codeclass="bg-blue">.to()</code> method, and uses all values and reproduce the animation of the second box exactly, but with nearly half the code.</li>
</ul>
<h3>Notes</h3>
<ul>
<li>This demo page should work with IE10+ browsers.</li>
<li>The order of the transform functions/properties is always the same: <code>perspective</code>, <code>translation</code>, <code>rotation</code>, <code>skew</code>, <code>scale</code>, 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
<li>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. </li>
<li>Use single axis transform functions like <code>translateX</code> when you want to animate the Y and Z axes back to ZERO, but in a convenient way.</li>
<li>Use shorthand functions like <code>translate3d</code> when you want to animate / keep multiple axes.</li>
<li>Shorthand functions like <code>translate3d</code> or <code>rotate3d</code> tween property generally not only improve performance, but will also minimize the code size. Eg. <code>translateX:150</code>,
<code>translateY:200</code>, <code>translateZ:50</code> => <code>translate3d:[150,200,50]</code> is quite the difference.</li>
<li>On larger amount of elements animating chains, the <code>.fromTo()</code> method is fastest, and you will have more work to do as well, but will eliminate any delay / syncronization issue that may occur.</li>
<li>This component is bundled with the <i>demo/src/kute-base.js</i> and the standard <i>kute.js</i> distribution files.</li>