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 section, it's very informative.
KUTE.js already packs quite alot of features, and that is thanks to its flexible nature that allows you to easily extend to your heart's desire. Whether you like to extend with CSS properties, easing functions, HTML presentation attributes or anything that Javascript can touch, even if it's not possible with CSS transitions or other Javascript libraries, KUTE.js makes it super easy.
For instance if you want to be able to animate the filter property, you only need three functions: one for preparing the property values needed for tween object build-up, a second function
to read current value and the last one for the DOM update callback, everything else is nicely taken care of. KUTE.js also provides very useful utilities for processing strings, HEX/RGBA colors and other
tools you can use for your own plugin's processing.
You may want to head over to the extend page for an indepth guide on how to write your own plugin/extension.
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, some 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 (compatibility mode OFF) 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 no longer requires window.requestAnimationFrame() for the main thread, but it does require the window.performance.now() for checking the current time,
.indexOf() for array/string checks, window.getComputedStyle() for the .to() method and .addEventListener() for scroll animation. 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. This very demo is a great 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() methods for a single element, with distinctive functionalities, and the other .allTo() and
.allFromTo() that use the first two for collections of elements.
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.
KUTE.allTo('selector', toValues, options) and KUTE.allFromTo('selector', fromValues, toValues, options) inherit all functionality from the .to() and .fromTo()
method respectively, but they apply to collections of elements. Unlike the first two methods that create single element tween objects, these two create collections of tween objects. Be sure to check the
API documentation on all the methods.
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 not running, 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? Well, make sure to check that out.
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, SVG Plugin, Text Plugin, Attributes Plugin, CSS Plugin, cubic bezier easing functions and also physics based easing functions. It also features an extensive guide on how to extend, but I'm open for more features in the future.
Check the documentation on these methods and the examples page for more.
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.