KUTE.js was developed with best practices in mind for fastest code execution and memory efficiency, but performance varies from case to case, as well as for all the other Javascript based animation engines. As a quick note on how it works, well for the most part values are cached for the entire duration of the animation so that the repetitive tasks run smoothly, uninterruptible and avoid layout thrashing. We all know the more properties used or the more elements to animate at the same time, the more power is required.
Of course some would argue on many aspects, but we all trade something for the sake of something else, such as convenience and/or flexibility or fork a project that's already great to make it.. better. For the sake of performance or simply willing to provide a feature, some trade/neglect other elements such as syncronisation (check this video), code simplicity (lots of CSS for a custom animation) and more other.
To learn more about how performance can vary from case to case, check out this secion, it's very informative.
KUTE.js uses a simple function to determine the vendor prefix and checks if the prefix is required. In any case it caches the prefixed/unprefixed property name in a variable to make it available when needed. This applies to the following CSS3 properties: transform, perspective, perspective-origin, border-radius and the requestAnimationFrame Javascript method.
We aren't only targeting properly browsers for CSS3 styling, but also increase performance because we don't need to update the styling on every frame for all browsers (and their versions) at once, just the right and only one; less string concatenation = more performance. This asumes you are NOT styling the above CSS3 properties using your stylesheets to avoid glitches with legacy browsers.
This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.
KUTE.js covers all modern browsers but also provides fallback options for legacy browsers. The prefix free feature mentioned above is one way to enable smooth Javascript based animations on older versions Gecko/Webkit/IE browsers for transform and border-radius. Generally, KUTE.js is built around most used properties, so I highly recommend checking the can I use website for a very detailed properties support list on many browsers and versions. For instance legacy browsers may support 2D transforms or 3D transforms so make sure you know what browsers support and how to target them before you get to work with a complete browser supported animation setup.
I've put a lot of work in making KUTE.js work with all Internet Explorer versions starting with IE8 and it really works with the help of polyfills and the appropriate code to detect them. All you need to do is to let the browser breathe, espectially IE8 needs to have resize handlers as minimal as possible. On the other side, IE9 really shines with 2D transforms animation, something that's impossible with CSS transition.
Speaking of polyfills, KUTE.js requires window.requestAnimationFrame() for the main thread, window.performance.now() for checking the current time, .indexOf() for array checks, window.getComputedStyle() for the .to() method and .addEventListener() for scroll. Unlike other developers I didn't include these polyfills in the code to keep it clean, so that YOU decide whether your project need them or not. Also know that when using the recommended polyfill service some browser detection will not work because they fill the gap and your code won't work as expected. For instance this would check for IE8 browser var isIE = document.all && !document.addEventListener; but the polyfill covers .addEventListener() so you will never succeed. The provided ideal HTML template is the best solution for targeting Microsoft's legacy browsers.
As of Safari, we did some tests there too, KUTE.js does it really well.
KUTE.js allows you to create tween objects with the help of .to() and .fromTo() public methods, with distinctive functionalities.
KUTE.to('selector', toValues, options) method is super simple and straightforward and requires a polyfill for window.getComputedStyle() Javascript method on IE8 and more other legacy browsers in order to read the current property value. If no value is set in the stylesheets or inline style, a property specific value will be used. It also computes the value on animation start, delaying the actual animation and potentially creating sync issues on large amounts of elements, but it has the great ability to stack transform properties as they come in chained tweens. However fixing the sync issues is not that hard, see the example at start() method API.
KUTE.fromTo('selector', fromValues, toValues, options) is the other method that's most powerful in terms of performance, flexibility and control on the animation. As an example, while the first method may not process properties' measurement units properly, this method will never fail in that regard, because you can set for both starting values and end values the exact values with the right unit you need.
It doesn't stack transform properties for chained tweens but you can set all properties to be used in all tweens if you want (end values from previous tween become start values for the next AND unchanged start values become end values), and make sure nothing is left unchecked, to avoid animation glitches. Still, this method is the fastest and bestest for super performance and super control.
Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: .start(), .stop(), .pause() and .resume(). These public methods work either when animation is running or is paused. You need to see the documentation to learn how these work.
Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for transform. For instance 3D rotations require a perspective or a perspective-origin, right?
Another important KUTE.js feature is the solid callback system. This allows you to schedule functions to run on animation start, on each frame, on pause / resume, on stop and on complete. The functions bound at start or resume will delay the animation, while the functions running on each frame can potentially influence performance on large amounts of elements so you must use them wisely.
KUTE.js sports some fine tuned addons: jQuery Plugin, cubic bezier easing functions and also physics based easing functions. I am also considering to feature an attributes plugin as well as SVG library and maybe other tools in the future.
Check the documentation on these methods and the examples page for more.
KUTE.js covers all animation needs such as most transform properties, scroll for window or a given element, colors, border-radius, and almost the full box model. Due to it's modular coding, KUTE.js is very flexible and makes it very easy to add support for more properties, but I'm considering removing unnecessary properties in the future (mostly from the box model category). Note: not all browsers support 2D transforms or 3D transforms.
All common measurement units are supported: px and % for translations and box-model properties, or deg and rad for rotations and skews, while clip only supports px. Other properties such as opacity, scale or scroll are unitless, and background-position always uses % as measurement unit. As for the text properties you can use px, em, rem, vh and vw. Be sure to check what your browsers support in terms of measurement unit.
In most cases, the best animation possible is the opacity, for performance, aesthetics and maybe more other reasons such as avoiding unwanted layout changes. KUTE.js also covers IE8 here with the help of proprietary synthax filter: alpha(opacity=0) but requires that you use the provided HTML template in order to detect the browser. Also, opacity can be used for instance on legacy browsers that don't support RGBA colors. Eg. opacity:0.5 will make an element semitransparent.
translate:150 to translate an element 150px to the right or translate:[-150,200] to move the element to the left by 150px and to bottom by 200px. Supported on IE9.rotate:250 will rotate an element clockwise by 250 degrees. Supported on IE9.skewX:25 will skew an element by 25 degrees. Supported on IE9.skewY:25 will skew an element by 25 degrees. Supported on IE9.scale:2 will enlarge an element by a degree of 2. Supported on IE9.translateX:150 to translate an element 150px to the right. Modern browsers only.translateY:-250 to translate an element 250px towards the top. Modern browsers only.translateZ:-250 to translate an element 250px to it's back, making it smaller. Modern browsers only and requires a perspective tween option to be used; the smaller perspective value, the deeper translation.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. Modern browsers only and also requires using a perspective tween option.rotateX:250 will rotate an element clockwise by 250 degrees. Modern browsers only and requires perspective.rotateY:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and also requires perspective.rotateZ:-150 will rotate an element counter-clockwise by 150 degrees. Modern browsers only and doesn't require perspective.position based properties for movement on vertical and / or horizontal axis. These properties require that the element to animate uses position: absolute/relative styling as well as it's parent element requires position:relative. These properties can be used as fallback for browsers with no support for translate properties such as IE8.scale on IE8 again, as well as for other purposes.margin: "20px 50px" or any other type are not supported.Remember: these properties are layout modifiers that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger resize event that may cause crashes on old browsers such as IE8 when using handlers bound on resize, so use with caution.
border-radius on all corners for a given element.border-top-left-radius for a given element.border-top-right-radius for a given element.border-bottom-left-radiusfor a given element.border-bottom-right-radiusfor a given element.For all radius properties above borderRadius:20 or borderTopLeftRadius:'25%' will do. In the first case px is the default measurement unit used, while in the second we require using % unit which is relative to the element's size.
Remember: shorthands for border-radius are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. -moz-border-radius-topleft) as they were deprecated with later versions.
KUTE.js currently supports values such as HEX, RGB and RGBA for all color properties, but IE8 does not support RGBA and always uses RGB when detected, otherwise will produce no effect. There is also a tween option keepHex:true to convert the color format. Eg. color: '#ff0000' or backgroundColor: 'rgb(202,150,20)' or borderColor: 'rgba(250,100,20,0.5)'
background-color for a given element.border-color on all sides for a given element.Remember: shorthands for border-color property as well as web color names (Eg. red, green, olive, etc.) are not supported.
These properties can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for scale on browsers that don't support transform at all. Yes, IE8 and other legacy browsers.
font-size for a given element.line-height for a given element.letter-spacing for a given element.Remember: these properties are also layout modifiers.
KUTE.js currently supports only vertical scroll for both the window and a given element that's scrollable. Both scroll: 150 or scrollTop: 150 notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles.
clip property for a given element. Only rect is supported. Eg. clip:[250,200,300,0]. See spec for details.background-position for a given element that uses a background image. It only uses % as measurement unit. Eg. backgroundPosition:[50,20]Make sure you go to the issues tracker and report the missing property ASAP.
You can develop with KUTE.js for free thanks to the MIT License terms. The terms in short allow you to use the script for free in both personal and commercial application as long as you give proper credits to the original author. Also a link back would be appreciated.
Also KUTE.js is super documented, all features and options are showcased with detailed examples so you can get your hands really dirty.