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.
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:
border-radius and the
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.
based animations on older versions Gecko/Webkit/IE browsers for
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
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
.fromTo() methods for a single element, with distinctive functionalities, and the other
.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
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
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:
.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-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: 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.
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.