diff --git a/README.md b/README.md
index 6888e2d..d059838 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
# kute.js
-A minimal native Javascript tweening engine with jQuery plugin, forked from tween.js. Since most of web developers don't actually use `yoyo`, `repeat`, `play`/`pause`/`resume`/`timeline`/whatever or tweening array values (processed with array interpolation functions), I've removed them, for simplicity and performance.
+A minimal native Javascript tweening engine with jQuery plugin, forked from tween.js with most essential options for web developers, designers and animators. Unlike the original script, KUTE.js delivers easy to use methods to set up high performance animations on the fly.
kute.js is like a merge of my own jQueryTween with tween.js, but generally it's a much more smarter build. You link the script at your ending </body>
tag and write one line to do just about any animation you can think of.
@@ -12,10 +12,10 @@ Thanks to jsdelivr, we have CDN link demo.
#jQuery Plugin
-That's right, there you have it, just a few bits of code to bridge the awesome `kute.js` to your jQuery powered projects/apps. The plugin can be found in the [/dist](https://github.com/thednp/kute.js/blob/master/dist/kute.jquery.js) folder.
+That's right, there you have it, just a few bits of code to bridge the awesome `kute.js` to your jQuery powered projects/apps. The plugin can be found in the [/dist](https://github.com/thednp/kute.js/blob/master/dist/kute-jquery.min.js) folder.
# What else it does
* computes option values properly according to their measurement unit (px,%,deg,etc)
@@ -90,18 +49,14 @@ That's right, there you have it, just a few bits of code to bridge the awesome `
* it converts `RGBA` & `HEX` colors to `RGB` and tweens the inner values, then ALWAYS updates color via `HEX`; no support for `RGBA`
* properly replaces `top`, `centered` or any other background position with proper value to be able to tween
* for most supported properties it reads the current element style property value as initial value (via `currentStyle || getComputedStyle`)
-* allows you to add 3 different callbacks: `start`, `special`, `finish`, and they can be set as tween options (so no more nested functions are invoked as object attributes)
+* allows you to add many callbacks: `start`, `update`, `complete`, `pause`, `stop`, and they can be set as tween options (so no more nested functions are invoked as object attributes)
* since `translate3D` is best for performance, `kute.js` will always uses it
* accepts "nice & easy string" easing functions, like `linear` or `exponentialOut` (removes the use of the evil `eval`, making development, safer easier and closer to development standards :)
-* uses 31 easing functions, all Robert Penner's easing equations
-* like mentioned above, for IE8 `zoom` is used for `transform: scale(0.5)`, it's not perfect as the object moves from it's floating point to the middle, and some left & top adjustments can be done, but to keep it simple and performance driven, I leave it as is, it's better than nothing.
-* generally it's using for `-webkit-` prefix for Safari and older webkit browsers for CSS powered transitions.
+* uses 31 easing functions, all Robert Penner's easing equations and 2 more libraries
+* generally it's doing browser prefixes for you as well.
# Browser Support
-Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills.io. Also `kute.js` needs to know when doing stuff for IE9- like my other scripts here, I highy recommend Paul Irish's conditional stylesheets guides to add ie ie[version]
to your site's HTML tag.
-
-# Demo
-coming soon..
+Since most modern browsers can handle pretty much everything, legacy browsers need some help, so give them polyfills.io. Also `kute.js` needs to know when doing stuff for IE9- like my other scripts here, I highy recommend Paul Irish's conditional stylesheets guides to add ie ie[version]
to your site's HTML tag.
# License
MIT License
diff --git a/demo/about.html b/demo/about.html
new file mode 100644
index 0000000..907e3f0
--- /dev/null
+++ b/demo/about.html
@@ -0,0 +1,148 @@
+
+
+
+
+
+
+
+
Tween is a term used by animators and software engineers to define the numeric start, end and the inbetween values used in digital animation, while the digital animation uses these tween values on a given frequency (interval) or scaled by hardware capability (monitors refresh rate, GPU frames per second, etc). The term was introduced to the world of web development by early Javascrpt libraries and later used in dedicated animation libraries such as GSAP, Dynamics, Velocity, Shifty, our own KUTE.js here and many others.
+Tween Object is a Javascript Object that stores temporarily or for a given time a set of variables such as tween values, HTML elements to animate, CSS properties and other tween options to be used for animation. To improve performance on repetitive animations, this object can be cached and reused whenever needed. In Javascript animation, the term tween actually refers to the tween object.
+polyfill is a term introduced by Remy Sharp back in 2009 as "a piece of code (or plugin) that provides the technology that you, the developer, expect the browser to provide natively". Basically a polyfill covers what legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. More details.
+requestAnimationFrame is a Javascript method developed to enable hardware acceleration animations for the web today. In Javascript, the window.requestAnimationFrame(callback);
method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a polyfil to cover the legacy browsers chaos.
JANK is a term used when browsers miss frames due to long script execution and/or long layout recomposition. JANK is the phenomenon reffering to severe frame drops. Luckily there are people who explain all about it, so you don't have to stay in the dark.
+Methods are functions that create tween objects or control the animation for KUTE.js, so we will encounter mostly main methods and tween control methods. Once a main method is used, then the control methods apply in a specific order.
+ + +Well, first things first: it's smart built. Let's briefly explain the phases:
+.to()
KUTE.js will look for the current values of the properties used or assign the default values built in the previous phase. For both methods, KUTE.js collects all the data, processes values and options (for instance easing functions need to be processed if you use a string like 'easingElasticOut', right?) and builds the tween object, with all properties' values start and values end, measurement units, tween options and callback functions..start()
function, if used, has finished. When animation starts, KUTE.js will start ticking on the frequency decided by requestAnimationFrame
or setInterval
for legacy browsers, quickly updating the style for the properties and execute the update:function
callback if any. Also while animating, KUTE.js will begin listening for your tween control input such as .pause()
or .stop()
or any other. Also, when a certain tween control method is used, KUTE.js will execute it's specific callback, if used.complete:function
callback function is executed and then KUTE.js starts the animation for any chained tween, or else will stop ticking with cancelAnimationFrame
to save power.Basically, this is it!
+ +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.
+ +While the code execution is the fastest for the layout modifiers or what we call box-model, say the position
based properties set such as left
or top
, they may force the entire page layout to change and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side translate
doesn't trigger a repaint but involves more complex operations such as object traversing, string concatenation or check for certain conditions to be met. All of this is because translate
is part of transform
CSS3 property that has to stack in a single line many more properties such as rotate
, skew
and scale
. An article by Paul Irish explains more about differences in performance between position and translation.
I would stress on this a bit: even faster performance for translation can be achieved by using an improved version of the tiny tween.js, as it only tweens the values and allows you to concatenate strings as you please. On large amounts of elements translating on vertical or horizontal axis, tween.js would be the best of them all, but well, we'll see about that in the performance testing page.
+ +To put it short left
executes faster but requires repaint on every frame while translateX
or translate3d
execute slower but require no repaint on each animation frame. The winner is left, when it comes to code execution, but if we also count the elements' size, the larger size the more favor the translation so the overall winner is translate. With other words the more pixels to recompose in the layout, the more time spent on each frame, and this is why translation is better in most cases, and animated positioning is best to be used as fallback animation for legacy browsers.
While running a 2D translate:150
animation could score similar performance as translateX:150
, interestingly, translate3d:[150,0,0]
is slightly faster than the other translations. Some performance tests confirm that translate3d
is the prefered property for hardware acceleration. For this reason, translate3d is the winner and KUTE.js always uses it even if you only use translateX
or translateY
for instance.
+
Similarly, if you animate the 2D translate
this always goes translate(x,y)
even if you use translate:150
(only for the X axis) or translate:[150,0]
(both X and Y axis), for better performance as well. And by the way, this works great on IE9 and other legacy browsers.
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.
+ +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.
The two main methods for creating animation setups (tween objects) that are coming with KUTE.js are .to()
and .fromTo()
. While .to()
is much more simple and convenient to use, very useful for tween chaining, it has to process the starting values on every .start()
delaying the animation for a few miliseconds depending on the browser and hardware, making .fromTo() the winner. On a large amount of elements animating at the same time, these scripting based delays can produce some serious syncronization issues, so caution is advised. In that case you should use .fromTo()
properly.
KUTE.js comes with 3 packs of easing functions: the popular easing functions by Robert Penner, dynamics physics easing functions by Michael Villar and bezier-easing by Gaëtan Renaudeau. I've worked very hard to optimize the last 2 as much as possible, but they will never beat Robert Penner's functions in any performance test, that's an all time winner.
+The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the cubic-bezier
based functions have a 0.0000001 error margin, while the Exponential
easing functions by Robert Penner are somewhat glitchy on long page scrolls or translations. Interestingly, some physics based functions perform exceedingly well, and generally the difference in performance is fairly negligible even for large amounts of elements, and have no impact on very few elements.
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.
+ +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!
+ +The browsers' performance goes like this (from best to poorest): Google Chrome, Opera, Internet Explorer, Firefox. Yes, Firefox is the slowest on Windows OS. I never tested anything on iOS or MAC-OS but I believe Safari performs very well with transforms. Some argue that Safari outperforms Google Chrome due to the latest Webkit upgrade.
+ +Also know that legacy browsers don't support requestAnimationFrame
and pollyfills usually replace it with setInterval
, a clasic Javascript method that's significantly affecting performance, because it's one of the main causes for lots of JANK.
Another important aspect as far as performance goes, the power saving profiles on Windows OS drops performance for desktop computers and especally laptops. Also when a laptop is unplugged, Windows automatically changes power profile drastically decreasing performance.
+ +As for the mobiles, you must know that even if you have an octacore CPU powered phone or tablet is never going to match a desktop and not even a laptop. For a mobile device these guys recommend to keep everything under 7 miliseconds for the smooth experience that most users expect and that the animation performance of a phone is actually up to 5 times lower than a desktop or laptop. I would stress that having 2 or 3 simoultaneous animations on a phone at a certain point is just about enough.
+ +Another thing to keep in mind is that scrollling on a mobile device is actually hardware accelerated animation and thus compete for power drastically reducing performance for any other CSS or Javascript driven animations. To understand how critical performance is on a mobile device, I highly recommend checking the Google I/O 2014 presentation. Now you understand how much performance really matters.
+Remember: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.
+ +KUTE.js continues what was started with jQueryTween 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, a true inspiration for the entire developers' community, not to mention the huge contribution and knowledge sharing.
+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.
+Also I would like to thank Ingwie Phoenix for the npm/Bower and UMD implementations.
+ + +Welcome to KUTE.js API documentation, here we're going to talk about how to download, install, use, control and set up cross browser animations, in great detailed. KUTE.js can be found on CDN and also npm and Bower repositories with all it's features and tools.
+ +You can install KUTE.js package by using either Bower or NPM.
+$ npm install --save kute.js
+# Or
+$ bower install --save kute.js
+
+
+ In your website add the following code, the best would be to put it at the end of your body
tag:
<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script> <!-- core KUTE.js -->
+
+ Also you can include the tools that you need for your project:
+<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute-jquery.min.js"></script> <!-- jQuery Plugin -->
+<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute-easing.min.js"></script> <!-- Bezier Easing Functions -->
+<script src="https://cdn.jsdelivr.net/kute.js/0.9.5/kute-physics.min.js"></script> <!-- Physics Easing Functions -->
+
+ Your awesome animation coding would follow after these script links.
+ +You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers can actually do. A quick note here: IE8 doesn't support any transform
property or RGBA
colors while IE9 can only do 2D transformations. Check the 2D transforms and the 3D transforms browser support list for more information.
Don't use Modernizr, the best thing we can actually do is use the Microsoft's synthax for it's own legacy browsers, so here's how a very basic HTML
template for your websites would look like:
<!DOCTYPE html>
+ <!--[if lt IE 8]><html class="ie prehistory" lang="en"><![endif]-->
+ <!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
+ <!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
+ <!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <!-- SEO meta here -->
+ <!-- add your CSS here -->
+ <!-- add polyfills -->
+ <script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script>
+ </head>
+ <body>
+ <!-- site content here -->
+ <!-- scripts go here -->
+ </body>
+</html>
+
+ For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: there you go.
+These methods allow you to create tween objects; here a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation duration or repeat. The methods have different uses and performance scores while making it easy to work with.
+.to() method is the most simple method which allows you to create tween objects for animating CSS properties from a specific default value OR from current/computed value TO a desired value.
+ It's performance is not the same as for the next two because it has to compute the default/current value on tween .start()
and thus delays the animation for a cuple of miliseconds, but this feature is great for simple animations AND it has the ability to stack transform properties as they go, making smooth transform animations on chained tweens. See the .start() method for the solution for sync/delay issue.
Considering a given div element is already transparent, a super quick example would be:
+KUTE.to(div,{opacity:1}).start()
+ .fromTo() method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest methods but unlike the .to()
method, it does not stack transform properties on chained tweens. Also, another advantage is the fact that you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the features page. So here's a quick example:
KUTE.fromTo(div,{opacity:1},{opacity:0}).start()
+ .Animate() method is only a fallback for the older KUTE.js versions and works as the .fromTo()
method. It will be deprecated with later versions.
These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:
+var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});
+ This tween object is now ready to work with the methods.
+ +.start() method starts animation for a given tween object. It can start the animation for both cached and non-cached objects. Unlike previous versions of KUTE.js, where animation started immediately after tween object creation, now you have to manually start them.
+//cached object defined above
+tween.start();
+
+//non-cached object are created on the fly and garbage collected after animation has finised
+KUTE.fromTo(div,{opacity:1},{opacity:0}).start();
+
+//also start the tween at a certain time
+tween.start(now); // where now must be the current or future time as number, see below
+
+
+ As you can see, you can also set a time for the animation to start, example: tween.start(myTimeValue)
. Having access to the method is useful when starting animation for large amounts of elements with same properties at the same time because using it properly eliminates any syncronization issue that may occur, even if you are using the .to()
method. This applies to our performance test page as well, and the trick is super duper simple:
// step 1 - create an empty array and grab the elements to animate
+var tweens = [], myElements = document.querySelector('.myManyElements');
+
+// step 2 - define tween objects for each element
+for (var i = 0; i < numberOfElements; i++) {
+ var tween = KUTE.fromTo(myElements[i], fromValues, toValues, options);
+ //now we populate the tweens array
+ tweens.push(tween);
+}
+
+// step 3 - calculate the right time to start
+// first we need the exact current time
+var now = window.performance.now(); // this returns the exact current time in numeric format
+
+// also we estimate/calculate an adjustment lag
+// depending on the number of the elements AND hardware capability
+// maybe (numberOfElements / 16) would be an accurate value for PCs
+var lag = 100; // number of miliseconds for the script to built tween objects for all elements
+
+// step4 - we just start the animation for all elements at once
+for (var i = 0; i < numberOfElements; i++) {
+ tweens[i].start(now+lag);
+}
+
+
+ If you care to see the actual working code, check it in the perf.js file.
+ +.stop() method stops animation for a given tween object while animating. You cannot stop the animation for tween objects created on the fly, only for cached objects. Let's assume that for the given tween we decide to stop the animation via click
action:
stopButton.addEventListener('click', function(){
+ tween.stop();
+}, false);
+
+
+ .pause() method freezez the animation at any given time for a given tween object, and unlike the .stop()
method, this one allows resuming the animation on a later use of the next method .play()
.
pauseButton.addEventListener('click', function(){
+ tween.pause();
+}, false);
+
+
+ .play() or .resume() methods allows you to resume an animation for a given tween object only if it was paused or else will produce no effect.
+playButton.addEventListener('click', function(){
+ tween.play(); // or tween.resume();
+}, false);
+
+
+ .chain() method can be used to chain tweens together. When the animation finishes for a given tween, it triggers the animation start for another tween.
+var tween2 = KUTE.fromTo(div,{left:50},{left:0});
+
+//the first tween chains the new tween
+tween.chain(tween2);
+
+//the new tween chains the first one creating a loop
+tween2.chain(tween);
+
+ It's also possible to chain multiple tweens, just as shown in the below example, but the one that finishes last (has longest delay and duration together) should be used last in the .chain()
method arguments list. Why? Because when a tween is finished it triggers cancelAnimationFrame()
and KUTE.js will stop "ticking" causing all other chained tweens to stop prematurelly.
//chain multiple tweens
+tween.chain(tween1,tween2);
+
+
+
+ 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 schedule the tween animation after a certain number of miliseconds. 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.
+ +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.
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();
+
+ 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 easing functions generally make animations closer to reality and completely eliminate the boring factor for a given context. The most simple example to understand what they do, think of gravity. Dropping an object from a given height, will start moving to the ground with accelerated speed. If the object has some sort of bounciness like a ball, it will jump back up and up again, till the gravity will eventually stick the object to the ground.
+What scientists observed and put in theory houndreads of years ago, later the pioneers of scripting started to implement the laws of physics into digital animation and came up with this notion of easing to describe the progression of movement. If you care to dig into the concept, here's an excellent resource some developers recommend. I would also recommend this one too.
+ +Modern browsers that support transition
can also make use of some generic easing functions via the CSS3 transition-timing-function:ease-out
property, but in Javascript animation, we need some special functions. The popular Robert Penner's easing functions set is one of them, and is the default set included with KUTE.js because it's the fastest set I know in terms of performance. Some functions may lack a bit of accuracy but they cover the most animation needs. Generally the easing functions' names are built with keywords that describe the type of easing, like circular or exponential, and also the type of progression in and/or out.
To use them, simply set a tween option like so easing: KUTE.Easing.easingSinusoidalInOut
or simply easing: 'easingSinusoidalInOut'
.
linear is the default easing function and just as it sounds, it means that the animation has no acceleration or deceleration over time. While this one is basically boring, it's the fastest in all, and it's very useful when animating opacity or colors because we cannot really distinguish changes in speed for such cases, but mostly for movement.
+ +curve based functions are the next set of easings we are going to tak about. They are basically the same, the only difference is the number of multipliers applied (better think of it like the more weight an object has, the more acceleration):
+The In / Out explained:
+back easing functions describe more complex animations (I would call them reverse gravity easings). They also come with in and/or out types of progression.
+elasticity easing functions describe the kind of animation where the object is elastic. With in and/or out as well.
+gravity based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With in and/or out as well.
+While modern browsers support CSS3 transition
with transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5)
, in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the features page, we are using a modified version of the cubic-bezier by Gaëtan Renaudeau. I believe this must be most accurate easing functions set.
You can use them either with easing: KUTE.Ease.bezier(mX1, mY1, mX2, mY2)
or easing: 'bezier(mX1, mY1, mX2, mY2)'
, where mX1, mY1, mX2, mY2 are Float values from 0 to 1. You can find the right values you need right here.
There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:
+KUTE.js also packs the dynamics physics easing functions by Michael Villar and I have to say these functions are amazing in terms of flexibility, control and performance. They allow you to control the friction, bounciness, frequency, elasticity, or multiple bezier points for your animations.
+You can use them either with regular Javascript invocation as shown below and configure / visualize them on the author's website, while you can also use the pack of presets featuring mostly bezier based functions. Ok now, let's get to it:
+ +frequency:1-1000
, friction:1-1000
, anticipationSize:0-1000
(a kind of delay in miliseconds) and anticipationStrength:0-1000
(a kind of a new curve to add to the function while waiting the anticipationSize). Usage: easing: KUTE.Physics.spring({friction:100,frequency:600})
.frequency:0-1000
and friction:0-1000
. Usage: easing: KUTE.Physics.bounce({friction:100,frequency:600})
.elasticity:1-1000
and bounciness:0-1000
. Usage: easing: KUTE.Physics.gravity({elasticity:100,bounciness:600})
.gravity
except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: elasticity:1-1000
and bounciness:0-1000
. Usage: easing: KUTE.Physics.forceWithGravity({elasticity:100,bounciness:600})
.easing: KUTE.Physics.bezier({points:POINTS_ARRAY_COMES HERE})
, again use the author's website, edit the bezier curve as you wish and copy paste the points array into this function. Here's how a basic easeIn looks like:
+// sample bezier based easing setting
+easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] })
+
+ The presets can be used both as a string easing:'physicsIn'
or easing:KUTE.Physics.physicsIn(friction:200)
. The list is:
friction
option;friction
option.Engine
+ + + + + +Property
+ + + + + + +Repeat
+ + + + + + +How many elements to animate:
+ + + + + + + + +These tests are only for modern browsers. In Google Chrome you can enable the FPS metter in developer tools, here's how.
+The hack refers to adding a blank transform translate3d(0px,0px,0px);
for the elements to promote them into separate layers, as described here.
Do not try this test on lower end or mobile devices.
+ +