As said before, performance varies from case to case; this chapter aims to explain what you should expect working with animation engines in these various scenarios at maximum stress, usually when your CPU cooler starts to work really hard, and how scalable performance can really be on various machines, operating systems or mobile devices.
+
A Note On Performance
+
As said before, performance varies from case to case; this chapter aims to explain what you should expect working with animation engines in these various scenarios at maximum stress, usually when your CPU cooler starts to work really hard, and how scalable performance can really be on various machines, operating systems or mobile devices. We'll dig into each case, by property type or anything that can be considered a factor of influence.
Function Nesting
This could be one of the most important factors that influence performance, because we neglect this fact most of the time and changing the scope of an animation engine is important to look after. A quick example would be when we create tween objects on events such as click, scroll or resize, we basically set a totally different scope for the animation and we fill the memory with large chunks of trash/jank, especially on events like resize.
@@ -107,7 +109,7 @@
Box Model
We compared position with transition above, but now we are going to talk about other issues related to resizers: width, height, margin, padding and borderWidth or any of their variations. The code execution is super fast, but when resizing the window while animations are running, the browser is also computing the resize handlers, the animation performance is very very low on all browsers, especially when you animate these resize properties. When this toxic combination occurs animating a large amount of elements to animate could crash any browser, no exception, and I think any developer should know about this.
The resize event triggered by these resizer properties can cause some severe issues with legacy browsers such as IE8. These good old browsers don't understand much about Javascript driven layout changes and thus skip/fail to execute any handlers attached to window resize event bubbles.
-
A workaound the resizers effect on the layout would be to use them only for absolute positioned elements, this way the layout will not need to be repainted and the recomposition is limited to the element itself. If not, and you are required to provide legacy support, you must DISABLE any resize handlers for IE8 and any other browser that runs slow or crashes. You should also consider not using any resize animation for legacy browsers especially when usability and larger reach is expected.
+
A workaound for the resizers' effect on the layout would be to use them only for absolute positioned elements, this way the layout will not need to be repainted and the recomposition is limited to the elements themselves. If not, and you are required to provide legacy support, you must DISABLE any resize handlers for IE8 and any other browser that runs slow or crashes. You should also consider not using any resize animation for legacy browsers especially when usability and larger reach is expected.
RGB and HEX
When animating any color property such as (text) color or background-color, KUTE.js always uses/converts to RGB/RGBA, but there is a keepHex:true tween option that overrides that. Still some browsers such as Chrome will still show you the computed style for your color as RGB no matter what. The conversion process will decrease performance, making RGB the winner.
@@ -123,6 +125,10 @@
The goal of the development strategy is to be able to execute the script, update layout and repaint, all under 16 miliseconds, so that the animation runs constantly at 60fps. However running some repeatable animations for a large amount of elements would really give garbage collectors a lot of work and thus some frames take more than 16 miliseconds. The more properties and/or elements, the more work.
While garbage collection is a great way modern browsers use to clean the memory, sometimes the garbage collector can jump in anytime, cousing drops in the order of miliseconds. Still, if it's the case, there are ways to help composing the layout faster, but we will see that in the performance testing page.
+
Property Value Complexity
+
Just like the high amount of simultaneous animations influence performance, the property value complexity is also an important factor. If we were to compare all the supported properties in terms of complexity, the list would go like this (from most expensive to least): path morphing, regular transform, matrix3d (not yet supported), box-shadow / text-shadow, colors, box model*, unitless props (scroll, opacity).
+
The * wants to emphasize the fact that box model properties of type resizers have additional performance drawbacks as discussed in a previous chapter.
+
OSs, Desktops and Mobiles
The performance tests have been performed mainly on Microsoft Windows 8.1 and Ubuntu Linux 14.04 Trusty Tahr with latest nVidia graphics drivers on both OSs, all set up for maximum performance. The browsers are obviously Firefox (both OSs), Google Chrome (both OSs), Opera (both OSs) and IE11 (Win8).
The results show Windows based browsers came better than Ubuntu based ones, mainly because of DirectX and better drivers that greatly improve hardware accelerated graphics, while Linux still faces some noticeable issues with vertical sync among many others, but hey it's a work in progress and it's open source!
@@ -141,7 +147,7 @@
KUTE.js Project
KUTE.js continues what was started with jQueryTween (removed) and the main goal is to improve usability, compatibility, code quality and performance. KUTE.js includes a jQuery plugin to help you easily implement it in your jQuery applications, and also packs a set of tools such as bezier and physics based easing functions, all elegantly packed for convenience and distributed via CDN.
It all started with a fork of the popular tween.js and ended up having a KUTE.js version 0.9.5 that's almost as good as the boss, GSAP, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, and a very tough competitor.
-
In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & pause, as well as for performance related issues. Generally I would stress that the code is a joint work of me and Dav. Big thanks Dav, well done.
+
In the hystory of the making there were consistent contributions of Dav aka @dalisoft for features such as play & pause, Text Plugin, as well as for performance related issues. Generally I would stress that the code is a joint work of me and Dav. Big thanks Dav, well done.
Also I would like to thank Ingwie Phoenix for the npm/Bower and UMD implementations.
These options affect all types of tweens, no matter the properties used or context.
-
duration: 500 option allows you to set the animation duration in miliseconds. The default value is 700.
-
repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.
-
delay: 500 option allows you to delay the tween animation for a certain number of miliseconds. The default value is 0.
-
offset: 200 option is only for .allTo() and .allFromTo() methods. This allows you to set a base delay in miliseconds that increases with each element in the collection. This has no effect on other methods and the default value is 0.
-
repeatDelay: 500 option allows you to set a number of miliseconds delay between repeatable animations. If repeat option is set to 0, will produce no effect. The default value is 0.
-
yoyo: true/false option makes use of the internal reverse functionality to also animate from end to start for a given tween. This option requires that you use the repeat option with at least value 1. The default value is false.
-
easing: 'easingCubicInOut' option allows you to use a custom easing function for your animation. For more info on the easing functions, you need to see the example pages. The default value is linear.
-
-
Transform Options
-
These options only affect animation involving any property from CSS3 transform specs and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.
-
perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element that is subject to transform animation. No default value.
-
perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.
-
parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation.
-
parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for the parent of the HTML element subject to the transform animation. Also like the above similar options, this options only accepts valid CSS values.
-
transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.
-
-
SVG Options
-
These options only affect animation of the path tween property, or what you know as SVG morphing.
-
-
showMorphInfo: true when true the script will log valuable information about the morph in order to help you maximize both performance and visuals of the morph.
-
morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption.
-
morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".
-
reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape.
-
reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape.
-
-
Callback Options
-
These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.
-
start: function option allows you to set a function to run once tween animation starts.
-
update: function option allows you to set a function to run on every frame.
-
pause: function option allows you to set a function to run when animation is paused.
-
resume: function option allows you to set a function to run when animation is resumed.
-
stop: function option allows you to set a function to run when animation is stopped.
-
complete: function option allows you to set a function to run when animation is finished.
-
A quick example would look like this:
-
//define a function
-var callback = function(){
- //do some foo
-}
-
-//create object and start animating already
-KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
-
-
Other
-
keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.
The best way to extend, no matter what you would like to achieve is to use a specific closure, here's an example:
/* KUTE.js - The Light Tweening Engine
+ * by dnp_theme
* package - pluginName
* desc - what your plugin does
- * by yourNickname aka YOUR NAME
+ * pluginName by yourNickname aka YOUR NAME
* Licensed under MIT-License
*/
diff --git a/features.html b/features.html
index 647a968..a214d9e 100644
--- a/features.html
+++ b/features.html
@@ -58,6 +58,7 @@
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.
Tween Options
-
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?
+
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.
Callback System
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.
Addons
-
KUTE.js sports some fine tuned addons: jQuery Plugin, cubic bezier easing functions and also physics based easing functions. It also features an attributes plugin as well as a SVG plugin for various awesome stuff, but I'm open for more features in the future.
+
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.
KUTE.js is a Javascript animation engine with top performance, memory efficient & modular code. It delivers a whole bunch of tools to help you create great custom animations.
KUTE.js can detect if the user's browser requires prefix and uses it accordingly for requestAnimationFrame, transform and border-radius, hustle free for older Gecko/Webkit/IE browsers.
+
KUTE.js can detect if the user's browser requires prefix and uses it accordingly for transform and border-radius, and even use the utilities yourself, so hustle free for older Gecko/Webkit/IE browsers.
@@ -132,17 +134,17 @@
Powerful Methods
-
KUTE.js allows you to create tweens and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum tween options.
+
KUTE.js allows you to create tweens and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum tween options.
Packed With Tools
-
KUTE.js comes with tools to help you configure awesome animations: SVG Plugin, jQuery plugin, cubic-bezier and physics easing functions, color convertors, and you can even extend it yourself.
+
KUTE.js comes with tools to help you configure awesome animations: CSS / SVG / ATTR Plugins, jQuery plugin, easing functions, color convertors, and you can even extend it yourself.
Plenty Of Properties
-
KUTE.js covers all animation needs such as SVG morph and other specific CSS properties, then transform, scroll, border-radius, and almost the full box model and also text properties.
+
KUTE.js covers all animation needs such as SVG morph and other specific CSS properties, then transform, scroll, border-radius, and almost the full box model and also text properties.
These options affect all types of tweens, no matter the properties used or context.
+
+
duration: 500 option allows you to set the animation duration in miliseconds. The default value is 700.
+
repeat: 20 option allows you to run the animation of given tween multiple times. The default value is 0.
+
delay: 500 option allows you to delay the tween animation for a certain number of miliseconds. The default value is 0.
+
offset: 200 option is only for .allTo() and .allFromTo() methods. This allows you to set a base delay in miliseconds that increases with each element in the collection. This has no effect on other methods and the default value is 0.
+
repeatDelay: 500 option allows you to set a number of miliseconds delay between repeatable animations. If repeat option is set to 0, will produce no effect. The default value is 0.
+
yoyo: true/false option makes use of the internal reverse functionality to also animate from end to start for a given tween. This option requires that you use the repeat option with at least value 1. The default value is false.
+
easing: 'easingCubicInOut' option allows you to use a custom easing function for your animation. For more info on the easing functions, you need to see the example pages. The default value is linear.
+
+
+
Transform Options
+
These options only affect animation involving any 3D property from CSS3 transform and have no effect on other CSS properties. While you can set perspective or perspective origin via CSS, these options are here to help, especially with full browser support and preffix free handling.
+
+
perspective: 500 option allows you to set a 3D transformation perspective for a given HTML element. No default value.
+
perspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.
+
parentPerspective: 500 option allows you to set a 3D perspective for the parent of the HTML element subject to the transform animation.
+
parentPerspectiveOrigin: "50% 50%" option allows you to set a perspectiveOrigin for the parent of the HTML element subject to the transform animation. Also like the above similar options, this options only accepts valid CSS values.
+
transformOrigin: "50% 50%" option allows you to set a transformOrigin for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.
+
+
+
SVG Plugin Options
+
The following options only affect animation of the path tween property, to customize the SVG morph animation. See SVG Plugin page.
+
+
showMorphInfo: true when true the script will log information about the morph in order to help you maximize/customize the morph.
+
morphPrecision: Number option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.
+
morphIndex: Number option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".
+
reverseFirstPath: true when is true this option allows you to reverse the draw direction of the FIRST shape.
+
reverseSecondPath: true when is true this option allows you to reverse the draw direction of the SECOND shape.
+
+
+
Text Plugin Options
+
The only option for the plugin is the textChars option for the text property and allows you to set the characters set for the scrambling character during the animation. See Text Plugin page for more instructions and demo.
+
+
Callback Options
+
These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.
+
+
start: function option allows you to set a function to run once tween animation starts.
+
update: function option allows you to set a function to run on every frame.
+
pause: function option allows you to set a function to run when animation is paused.
+
resume: function option allows you to set a function to run when animation is resumed.
+
stop: function option allows you to set a function to run when animation is stopped.
+
complete: function option allows you to set a function to run when animation is finished.
+
+
+
A quick example would look like this:
+
//define a function
+var callback = function(){
+ //do some foo
+}
+
+//create object and start animating already
+KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
+
+
Other
+
keepHex: true option allows you to always use HEX color format, even if you have used RGB or RGBA. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.