deblan/kute.js
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Minor documentation fixes:

Browse source 
* Documentation updates
* Fixed navigation on IE8
This commit is contained in:
thednp 2017-01-23 15:55:10 +02:00
parent 293098c0c6
commit 449f5ed1e3
17 changed files with 3871 additions and 3414 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

366
about.html
View file

@ -3,7 +3,9 @@
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
<!--[if gte IE 9 | !IE ]><!--> <html lang="en"> <!--<![endif]-->
<!--[if gte IE 9 | !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
@ -12,170 +14,238 @@
<meta name="description" content="About KUTE.js performance, also about the KUTE.js project, code and a short glossary with most used terminology in Javascript animation.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,about kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- TO DO -->
<title>About KUTE.js | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li class="active"><a href="about.html">About</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li class="active"><a href="about.html">About</a></li>
</ul>
</div>
</div>
</div>
<div class="content-wrap">
<h2>Did you know?</h2>
<p><strong>Tween</strong> is a term used by animators and software engineers to define the numeric start, end and the <a href="https://en.wikipedia.org/wiki/Inbetweening" target="_blank"><em>inbetween</em></a> 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 vertical sync, etc). The term was introduced to the world of web development by early Javascrpt
libraries and later used in dedicated animation libraries such as <a href="https://greensock.com" target="_blank">GSAP</a>, <a href="http://dynamicsjs.com" target="_blank">Dynamics</a>, <a href="http://julian.com/research/velocity/" target="_blank">Velocity</a>,
<a href="https://jeremyckahn.github.io/shifty/" target="_blank">Shifty</a>, our own <strong>KUTE.js</strong> here and many others. When used as a verb, it actually reffers to the interpolation of the values.</p>
<p><strong>Tween Object</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank"><em>Javascript Object</em></a> 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 <strong>tween</strong> actually refers to the <strong>tween object</strong>.</p>
<p><strong>polyfill</strong> 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 <em>natively</em>". Basically a polyfill covers what
legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. <a href="https://remysharp.com/2010/10/08/what-is-a-polyfill" target="_blank">More details</a>.</p>
<p><strong>requestAnimationFrame</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" target="_blank"><em>Javascript method</em></a> developed to enable hardware acceleration animations for the
web today. In Javascript, the <code>window.requestAnimationFrame(callback);</code> method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a <a href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">polyfil</a> to cover the legacy browsers chaos.</p>
<p><strong>JANK</strong> 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
<a href="http://www.html5rocks.com/en/tutorials/speed/rendering/"
target="_blank">explain all about it</a>, so you don't have to stay in the dark.</p>
<p><strong>Methods</strong> are functions that create <strong>tween objects</strong> or control the animation for KUTE.js, so we will encounter mostly <em>main methods</em> and <em>tween control methods</em>. Once a main method is used, then
the control methods apply in a specific order.</p>
<h2 id="how">How Does It Work?</h2>
<p>Well, first things first: it's smart built. Let's briefly explain the phases:</p>
<ol>
<li>On first initialization KUTE.js creates some variables such as supported properties and their default values, the user's browser prefix, the true scroll container (some browsers actually scroll the body, while others prefer the HTML tag),
a boolean variable that makes KUTE.js aware it's working with IE8, as well as other variables required during the main thread. This phase is very important for the performance on the next phases.</li>
<li>In the next phase it's going to build the tween object with the chosen method according to it's distinct functionalities. If the chosen method is <code>.to()</code> 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.</li>
<li>In the third phase KUTE.js is ready to start the animation, but the animation starts only after the <code>.start()</code> function, if used, has finished. When animation starts, KUTE.js will start <em>ticking</em> on the frequency decided
by <code>requestAnimationFrame</code> or <code>setInterval</code> for legacy browsers, quickly updating the style for the properties and execute the <code>update:function</code> callback if any. Also while animating, KUTE.js will begin
<em>listening</em> for your tween control input such as <code>.pause()</code> or <code>.stop()</code> or any other. Also, when a certain tween control method is used, KUTE.js will execute it's specific callback, if used.</li>
<li>When tween animation is finished, the <code>complete:function</code> callback function is executed and then KUTE.js starts the animation for any chained tween, or else will stop ticking with <code>cancelAnimationFrame</code> to save power.</li>
</ol>
<p>Basically, this is it!</p>
<h2 id="performance">A Note On Performance</h2>
<p>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.</p>
<h3>Function Nesting</h3>
<p>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 <code>click</code>, <code>scroll</code> or <code>resize</code>, 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 <code>resize</code>.</p>
<p>A better way to handle this is to create the tween objects outside the event handlers and only start the animation with these handlers when certain conditions are met. EG: <code>if (window.clientWidth > 760) { myTween.start() }</code>. Also
keep in mind that this approach will eliminate any possible syncronization issues, but creating many animations is a huge temptation and this will create lots of problems for the old browsers, so keep the function nesting to as minimal
as possible as a general rule.</p>
<h3>Translate and Position</h3>
<p>While the code execution is the <strong>fastest</strong> for the <em>layout modifiers</em> or what we call <em>box-model</em>, say the <code>position</code> based properties set such as <code>left</code> or <code>top</code>, they may force
the entire page layout to change if not absolutelly positioned and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side <code>translate</code> doesn't trigger
a repaint but involves more complex operations such as more object traversing, string concatenation or check for certain conditions to be met. All of this is because <code>translate</code> is part of <code>transform</code> CSS3 property
that has to stack in a single line many more properties such as <code>rotate</code>, <code>skew</code> and <code>scale</code>. <a href="http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" target="_blank">An article</a> by Paul Irish explains more about differences in performance between position and translation.</p>
<p>Also any transform property is sub-pixel enabled and requires one or more decimals for accurate and smooth animation, decreasing overall performance. That said and with the emerging high resolution displays, it's safe to speculate that at
least translation could be optimized by rounding the values, while scale, rotation and skew requires three decimals.</p>
<p><span class="ion-android-plane media"></span>To put it short <code>left</code> executes faster but requires repaint on every frame while <code>translateX</code> or <code>translate3d</code> execute slower but require no repaint on each animation
frame. The <strong>winner</strong> is <kbd>left</kbd>, when it comes to code execution speed, but if we also count the elements' size, the larger size the more favor the translation so the <strong>overall winner</strong> is <kbd>translate</kbd>.
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.</p>
<h3>Translate, TranslateX and Translate3D</h3>
<p>While running a 2D <code>translate:150</code> animation could score similar performance as <code>translateX:150</code>, interestingly, <code>translate3d:[150,0,0]</code> is slightly faster than the other translations. Some performance <a href="http://jsperf.com/translate3d-vs-xy/28">tests</a> confirm that <code>translate3d</code> is the prefered property for hardware acceleration. For this reason, <kbd>translate3d</kbd> is the <strong>winner</strong> and KUTE.js always uses it even if you only use <code>translateX</code> or
<code>translateY</code> for instance.
<p>
<p>Similarly, if you animate the 2D <code>translate</code> this always goes <code>translate(x,y)</code> even if you use <code>translate:150</code> (only for the X axis) or <code>translate:[150,0]</code> (both X and Y axis), for better
performance as well. And by the way, this works great on IE9 and other legacy browsers.</p>
<h3>Box Model</h3>
<p><span class="ion-nuclear media"></span>We compared position with transition above, but now we are going to talk about other issues related to <strong>resizers</strong>: <code>width</code>, <code>height</code>, <code>margin</code>,
<code>padding</code> and <code>borderWidth</code> 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 <strong>all</strong> browsers, especially when you animate these resize properties. When this <strong>toxic combination</strong> occurs animating a large amount of elements could crash any browser,
no exception, and I think any developer should know about this.</p>
<p>The <code>resize</code> event triggered by these resizer properties can cause some <strong>severe issues with legacy browsers</strong> 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.</p>
<p>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.</p>
<h3>RGB and HEX</h3>
<p><span class="ion-android-color-palette media"></span>When animating any color property such as (text) <code>color</code> or <code>background-color</code>, KUTE.js always uses/converts to RGB/RGBA, but there is a <code>keepHex:true</code> 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 <kbd>RGB</kbd> the <strong>winner</strong>.</p>
<h3>TO and FROMTO</h3>
<p>The two main methods for creating animation setups (tween objects) that are coming with KUTE.js are <code>.to()</code> and <code>.fromTo()</code>. While <code>.to()</code> is much more simple and convenient to use, very useful for
tween chaining, it has to process the starting values on every <code>.start()</code> delaying the animation for a few miliseconds depending on the browser and hardware, making <kbd>.fromTo()</kbd> the <strong>winner</strong>. 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 <code>.fromTo()</code> properly.</p>
<h3>Easing Functions</h3>
<p>KUTE.js comes with 3 packs of easing functions: the popular <a href="http://robertpenner.com/easing/" target="_blank">easing functions</a> by Robert Penner, <a href="http://dynamicsjs.com/" target="_blank">dynamics physics</a> easing
functions by Michael Villar and <a href="https://github.com/gre/bezier-easing" target="_blank">bezier-easing</a> 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 <strong>winner</strong>.</p>
<p><span class="ion-shuffle media"></span>The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the <code>cubic-bezier</code> based functions have a 0.0000001
error margin, while the <code>Exponential</code> 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.</p>
<h3>Garbage Collection</h3>
<p><span class="ion-trash-a media"></span>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.</p>
<p>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 <a href="performance">page</a>.</p>
<h3>Property Value Complexity</h3>
<p>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<span style="color:red">*</span>, unitless props (scroll, opacity).</p>
<p>The <span style="color:red">*</span> wants to emphasize the fact that box model properties of type resizers have additional performance drawbacks as discussed in a previous chapter.</p>
<h3>OSs, Desktops and Mobiles</h3>
<p><span class="ion-social-tux media"></span>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).</p>
<p><span class="ion-social-windows media"></span>The results show <strong>Windows</strong> 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!</p>
<p><span class="ion-social-chrome media"></span>The browsers' performance goes like this (from best to poorest): <strong>Google Chrome</strong>, 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. <a href="http://venturebeat.com/2014/05/12/apple-upgrades-safaris-webkit-to-challenge-googles-chrome-browser/" target="_blank">Some argue</a> that
Safari outperforms Google Chrome due to the latest Webkit upgrade.</p>
<p>Also know that legacy browsers don't support <code>requestAnimationFrame</code> and pollyfills usually replace it with <code>setInterval</code>, a clasic Javascript method that's
<a href="https://jsperf.com/requestanimationframe-vs-setinterval-loop/7"
target="_blank">significantly</a> affecting performance, because it's one of the main causes for <a href="http://www.html5rocks.com/en/tutorials/speed/rendering/" target="_blank">lots of JANK</a>.</p>
<p>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. </p>
<p>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 <a href="https://www.youtube.com/watch?v=YyQYhhy1dZI" target="_blank">these guys</a> 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.</p>
<p><span class="ion-android-phone-portrait media"></span>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 <a href="https://youtu.be/WrA85a4ZIaM?t=16m6s" target="_blank">Google I/O 2014 presentation</a>.
Now you understand how much performance really matters.</p>
<p><strong>Remember</strong>: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.</p>
<h2>KUTE.js Project</h2>
<p>KUTE.js continues what was started with <strong>jQueryTween</strong> (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.</p>
<p>It all started with a fork of the popular <a href="https://github.com/tweenjs/tween.js" target="_blank">tween.js</a> and ended up having a KUTE.js version 0.9.5 that's very fast, memory efficient and super easy to use.</p>
<p>In the hystory of the making there were consistent contributions of <a href="https://github.com/dalisoft" target="_blank">Dav</a> aka @dalisoft for features such as play &amp; pause, <a href="text.html">Text Plugin</a>, 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.</p>
<p>Also I would like to thank <a href="http://ingwie.me/" target="_blank">Ingwie Phoenix</a> for the npm/Bower and UMD implementations.</p>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<div class="content-wrap">
<h2>Did you know?</h2>
<p><strong>Tween</strong> is a term used by animators and software engineers to define the numeric start, end and the <a href="https://en.wikipedia.org/wiki/Inbetweening" target="_blank"><em>inbetween</em></a> 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 vertical sync, etc). The term was introduced to the world of web development by early Javascrpt libraries and later used in dedicated animation libraries such as <a href="https://greensock.com" target="_blank">GSAP</a>, <a href="http://dynamicsjs.com" target="_blank">Dynamics</a>, <a href="http://julian.com/research/velocity/" target="_blank">Velocity</a>, <a href="https://jeremyckahn.github.io/shifty/" target="_blank">Shifty</a>, our own <strong>KUTE.js</strong> here and many others. When used as a verb, it actually reffers to the interpolation of the values.</p>
<p><strong>Tween Object</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" target="_blank"><em>Javascript Object</em></a> 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 <strong>tween</strong> actually refers to the <strong>tween object</strong>.</p>
<p><strong>polyfill</strong> 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 <em>natively</em>". Basically a polyfill covers what legacy browsers don't support or in other cases corrects the implemented behavior that is different from the standards. <a href="https://remysharp.com/2010/10/08/what-is-a-polyfill" target="_blank">More details</a>.</p>
<p><strong>requestAnimationFrame</strong> is a <a href="https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame" target="_blank"><em>Javascript method</em></a> developed to enable hardware acceleration animations for the web today. In Javascript, the <code>window.requestAnimationFrame(callback);</code> method is all we need to setup animations really for all the above mentioned animation engines. Some developers built a <a href="http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/">polyfil</a> to cover the legacy browsers chaos.</p>
<p><strong>JANK</strong> 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 <a href="http://www.html5rocks.com/en/tutorials/speed/rendering/" target="_blank">explain all about it</a>, so you don't have to stay in the dark.</p>
<p><strong>Methods</strong> are functions that create <strong>tween objects</strong> or control the animation for KUTE.js, so we will encounter mostly <em>main methods</em> and <em>tween control methods</em>. Once a main method is used, then the control methods apply in a specific order.</p>
<h2 id="how">How Does It Work?</h2>
<p>Well, first things first: it's smart built. Let's briefly explain the phases:</p>
<ol>
<li>On first initialization KUTE.js creates some variables such as supported properties and their default values, the user's browser prefix, the true scroll container (some browsers actually scroll the body, while others prefer the HTML tag), a boolean variable that makes KUTE.js aware it's working with IE8, as well as other variables required during the main thread. This phase is very important for the performance on the next phases.</li>
<li>In the next phase it's going to build the tween object with the chosen method according to it's distinct functionalities. If the chosen method is <code>.to()</code> 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.</li>
<li>In the third phase KUTE.js is ready to start the animation, but the animation starts only after the <code>.start()</code> function, if used, has finished. When animation starts, KUTE.js will start <em>ticking</em> on the frequency decided by <code>requestAnimationFrame</code> or <code>setInterval</code> for legacy browsers, quickly updating the style for the properties and execute the <code>update:function</code> callback if any. Also while animating, KUTE.js will begin <em>listening</em> for your tween control input such as <code>.pause()</code> or <code>.stop()</code> or any other. Also, when a certain tween control method is used, KUTE.js will execute it's specific callback, if used.</li>
<li>When tween animation is finished, the <code>complete:function</code> callback function is executed and then KUTE.js starts the animation for any chained tween, or else will stop ticking with <code>cancelAnimationFrame</code> to save power.</li>
</ol>
<p>Basically, this is it!</p>
<h2 id="performance">A Note On Performance</h2>
<p>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.</p>
<h3>Function Nesting</h3>
<p>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 <code>click</code>, <code>scroll</code> or <code>resize</code>, 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 <code>resize</code>.</p>
<p>A better way to handle this is to create the tween objects outside the event handlers and only start the animation with these handlers when certain conditions are met. EG: <code>if (window.clientWidth > 760) { myTween.start() }</code>. Also keep in mind that this approach will eliminate any possible syncronization issues, but creating many animations is a huge temptation and this will create lots of problems for the old browsers, so keep the function nesting to as minimal as possible as a general rule.</p>
<h3>Translate and Position</h3>
<p>While the code execution is the <strong>fastest</strong> for the <em>layout modifiers</em> or what we call <em>box-model</em>, say the <code>position</code> based properties set such as <code>left</code> or <code>top</code>, they may force the entire page layout to change if not absolutelly positioned and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side <code>translate</code> doesn't trigger a repaint but involves more complex operations such as more object traversing, string concatenation or check for certain conditions to be met. All of this is because <code>translate</code> is part of <code>transform</code> CSS3 property that has to stack in a single line many more properties such as <code>rotate</code>, <code>skew</code> and <code>scale</code>. <a href="http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" target="_blank">An article</a> by Paul Irish explains more about differences in performance between position and translation.</p>
<p>Also any transform property is sub-pixel enabled and requires one or more decimals for accurate and smooth animation, decreasing overall performance. That said and with the emerging high resolution displays, it's safe to speculate that at least translation could be optimized by rounding the values, while scale, rotation and skew requires three decimals.</p>
<p><span class="ion-android-plane media"></span>To put it short <code>left</code> executes faster but requires repaint on every frame while <code>translateX</code> or <code>translate3d</code> execute slower but require no repaint on each animation frame. The <strong>winner</strong> is <kbd>left</kbd>, when it comes to code execution speed, but if we also count the elements' size, the larger size the more favor the translation so the <strong>overall winner</strong> is <kbd>translate</kbd>. 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.</p>
<h3>Translate, TranslateX and Translate3D</h3>
<p>While running a 2D <code>translate:150</code> animation could score similar performance as <code>translateX:150</code>, interestingly, <code>translate3d:[150,0,0]</code> is slightly faster than the other translations. Some performance <a href="http://jsperf.com/translate3d-vs-xy/28">tests</a> confirm that <code>translate3d</code> is the prefered property for hardware acceleration. For this reason, <kbd>translate3d</kbd> is the <strong>winner</strong> and KUTE.js always uses it even if you only use <code>translateX</code> or <code>translateY</code> for instance.<p>
<p>Similarly, if you animate the 2D <code>translate</code> this always goes <code>translate(x,y)</code> even if you use <code>translate:150</code> (only for the X axis) or <code>translate:[150,0]</code> (both X and Y axis), for better performance as well. And by the way, this works great on IE9 and other legacy browsers.</p>
<h3>Box Model</h3>
<p><span class="ion-nuclear media"></span>We compared position with transition above, but now we are going to talk about other issues related to <strong>resizers</strong>: <code>width</code>, <code>height</code>, <code>margin</code>, <code>padding</code> and <code>borderWidth</code> 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 <strong>all</strong> browsers, especially when you animate these resize properties. When this <strong>toxic combination</strong> occurs animating a large amount of elements could crash any browser, no exception, and I think any developer should know about this.</p>
<p>The <code>resize</code> event triggered by these resizer properties can cause some <strong>severe issues with legacy browsers</strong> 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.</p>
<p>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.</p>
<h3>RGB and HEX</h3>
<p><span class="ion-android-color-palette media"></span>When animating any color property such as (text) <code>color</code> or <code>background-color</code>, KUTE.js always uses/converts to RGB/RGBA, but there is a <code>keepHex:true</code> 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 <kbd>RGB</kbd> the <strong>winner</strong>.</p>
<h3>TO and FROMTO</h3>
<p>The two main methods for creating animation setups (tween objects) that are coming with KUTE.js are <code>.to()</code> and <code>.fromTo()</code>. While <code>.to()</code> is much more simple and convenient to use, very useful for tween chaining, it has to process the starting values on every <code>.start()</code> delaying the animation for a few miliseconds depending on the browser and hardware, making <kbd>.fromTo()</kbd> the <strong>winner</strong>. 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 <code>.fromTo()</code> properly.</p>
<h3>Easing Functions</h3>
<p>KUTE.js comes with 3 packs of easing functions: the popular <a href="http://robertpenner.com/easing/" target="_blank">easing functions</a> by Robert Penner, <a href="http://dynamicsjs.com/" target="_blank">dynamics physics</a> easing functions by Michael Villar and <a href="https://github.com/gre/bezier-easing" target="_blank">bezier-easing</a> 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 <strong>winner</strong>.</p>
<p><span class="ion-shuffle media"></span>The point here is that the more accuracy a function offers, the more power needed, and the result is less performance. For instance the <code>cubic-bezier</code> based functions have a 0.0000001 error margin, while the <code>Exponential</code> 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.</p>
<h3>Garbage Collection</h3>
<p><span class="ion-trash-a media"></span>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.</p>
<p>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 <a href="performance">page</a>.</p>
<h3>Property Value Complexity</h3>
<p>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<span style="color:red">*</span>, unitless props (scroll, opacity).</p>
<p>The <span style="color:red">*</span> wants to emphasize the fact that box model properties of type resizers have additional performance drawbacks as discussed in a previous chapter.</p>
<h3>OSs, Desktops and Mobiles</h3>
<p><span class="ion-social-tux media"></span>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).</p>
<p><span class="ion-social-windows media"></span>The results show <strong>Windows</strong> 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!</p>
<p><span class="ion-social-chrome media"></span>The browsers' performance goes like this (from best to poorest): <strong>Google Chrome</strong>, 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. <a href="http://venturebeat.com/2014/05/12/apple-upgrades-safaris-webkit-to-challenge-googles-chrome-browser/" target="_blank">Some argue</a> that Safari outperforms Google Chrome due to the latest Webkit upgrade.</p>
<p>Also know that legacy browsers don't support <code>requestAnimationFrame</code> and pollyfills usually replace it with <code>setInterval</code>, a clasic Javascript method that's <a href="https://jsperf.com/requestanimationframe-vs-setinterval-loop/7" target="_blank">significantly</a> affecting performance, because it's one of the main causes for <a href="http://www.html5rocks.com/en/tutorials/speed/rendering/" target="_blank">lots of JANK</a>.</p>
<p>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. </p>
<p>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 <a href="https://www.youtube.com/watch?v=YyQYhhy1dZI" target="_blank">these guys</a> 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.</p>
<p><span class="ion-android-phone-portrait media"></span>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 <a href="https://youtu.be/WrA85a4ZIaM?t=16m6s" target="_blank">Google I/O 2014 presentation</a>. Now you understand how much performance really matters.</p>
<p><strong>Remember</strong>: do not open any Javascript animation engine performance test with your phone, you may burn your battery, espectially if it's unpluggable.</p>
<h2>KUTE.js Project</h2>
<p>KUTE.js continues what was started with <strong>jQueryTween</strong> (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.</p>
<p>It all started with a fork of the popular <a href="https://github.com/tweenjs/tween.js" target="_blank">tween.js</a> and ended up having a KUTE.js version 0.9.5 that's very fast, memory efficient and super easy to use.</p>
<p>In the hystory of the making there were consistent contributions of <a href="https://github.com/dalisoft" target="_blank">Dav</a> aka @dalisoft for features such as play &amp; pause, <a href="text.html">Text Plugin</a>, 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.</p>
<p>Also I would like to thank <a href="http://ingwie.me/" target="_blank">Ingwie Phoenix</a> for the npm/Bower and UMD implementations.</p>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div><!-- /.site-wrapper -->
<!-- /.site-wrapper -->
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/kute.min.js"></script>
<!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script>
<!-- some stuff -->
</body>
</html>

534
api.html
View file

@ -1,259 +1,275 @@
<!DOCTYPE html>
<!--[if IE 7]><html class="ie ie7" 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, minimum-scale=1.0">
<meta name="description" content="A detailed API documentation on KUTE.js public methods on how to create tween objects or how to control the tween animation.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,public methods,tween control,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<title>KUTE.js Developer API | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li class="active"><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2>Public Methods</h2>
<p>These methods allow you to create <strong>tween objects</strong> and collections of <strong>tween objects</strong>; as we know, a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation duration, repeat or other options. The methods have different uses and performance scores while making it easy to work with.</p>
<h3>Single Tween Object</h3>
<p>As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements, except when used in combination with jQuery and the KUTE.js plugin for jQuery, where, as jQuery always does, it always works with collections of elements.</p>
<p><kbd>.to()</kbd> 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 <strong>.fromTo()</strong> method as it has to compute the default/current value on tween <code>.start()</code> and thus delays the animation for a couple of miliseconds; still 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 <a href="#start">.start()</a> method for the solution for sync/delay issue.</p>
<p>Considering a given <em>div</em> element is already transparent, a super quick example would be:</p>
<pre><code class="language-javascript">KUTE.to(div,{opacity:1}).start()</code></pre>
<p>As you might have guessed, this method is useful for creating simple animations such as for scroll, hide/reveal elements, or generally when you don't know the current value of the property you are trying to animate.</p>
<p><kbd>.fromTo()</kbd> method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest method but unlike the <code>.to()</code> method, it does not stack transform properties on chained tweens. Along with the performance advantage, you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the <a href="features.html">features page</a>. Here's a quick example:</p>
<pre><code class="language-javascript">KUTE.fromTo(div,{opacity:1},{opacity:0}).start()</code></pre>
<h3>Tween Object Collections</h3>
<p>The two new methods allow you to create animations for multiple HTML elements at the same time, all in a single line of code. They use the above methods to create a tween object for each element of the collection and also enable the tween control methods in this new context.</p>
<p><kbd>.allTo()</kbd> method allows you to create an array of tween objects for a collection of elements. This method is using the above <code>.to()</code> method and inherits it's functionality. Considering a given collection <code>myDivs</code> elements, a nice example would be:</p>
<pre><code class="language-javascript">// on the fly, grab the elements by className,
// do the tween objects array, and start kicking
KUTE.allTo( '.my-div-class', {opacity:1}, {offset: 200, duration: 500} ).start();
// or we cache the objects for better performance and / or later control
var myDivs = document.querySelectorAll('.my-div-class');
var myDivsTweens = KUTE.allTo( myDivs, {opacity:1}, {offset: 200, duration: 500} );
</code></pre>
<p><kbd>.allFromTo()</kbd> method is also a method to animate a collection of elements and it uses the <code>.fromTo()</code> method. Quick example:</p>
<pre><code class="language-javascript">KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()</code></pre>
<p>As you can see the above code, these methods have a specific tween option called <code>offset</code> that allows you to set a delay in miliseconds between the starting time of each tween animation. Most tween control methods apply to both methods, except for the <code>.chain()</code> method. In order to chain another tween to one of the <code>myDivsTweens</code> objects, we would need to access it from the array, but let's leave that for later.</p>
</div>
<div class="content-wrap">
<h2>Tween Control Methods</h2>
<p>These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:</p>
<pre><code class="language-javascript">var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});</code></pre>
<p>This tween object is now ready to work with the methods.</p>
<h3 id="start">Starting Animations</h3>
<p><kbd>.start()</kbd> 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. This method also applies to arrays of tween objects created with <code>.allTo()</code> and <code>.allFromTo()</code> methods.</p>
<pre><code class="language-javascript">//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
// lastly the method works with tweens made with .allTo() and .allFromTo() methods
KUTE.allFromTo(divs,{opacity:1},{opacity:0}).start();
KUTE.allTo(divs,{opacity:0}).start();
</code></pre>
<p>As you can see, you can also set a time for the animation to start, example: <code>tween.start(myTimeValue)</code>. 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 <strong>eliminates any syncronization issue</strong> that may occur on animations start, even if you are using the <code>.to()</code> method. The trick is super duper simple:</p>
<pre><code class="language-javascript">// step 1 - create an empty array and grab the elements to animate
var tweens = [], myElements = document.querySelector('.myManyElements'), numberOfElements = myElements.length;
// 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);
}
</code></pre>
<p>In other cases the new methods <code>.allTo()</code> and <code>.allFromTo()</code> can be more useful.</p>
<h3>Stopping Animation</h3>
<p><kbd>.stop()</kbd> method stops animation for a given tween object or an array of tween objects (built with <code>.to()</code>/<code>.fromTo()</code> methods) 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 <code>click</code> action:</p>
<pre><code class="language-javascript">// for a tween object
stopButton.addEventListener('click', function(){
myTween.stop(); // myMultiTweens.stop();
}, false);
</code></pre>
<h3>Pausing Animation</h3>
<p><kbd>.pause()</kbd> method freezez the animation at any given time for a given tween object or collection, and unlike the <code>.stop()</code> method, this one allows resuming the animation on a later use of the next method <code>.play()</code>.</p>
<pre><code class="language-javascript">pauseButton.addEventListener('click', function(){
tween.pause(); // or myMultiTweens.pause();
}, false);
</code></pre>
<h3>Resuming Paused Animation</h3>
<p><kbd>.play()</kbd> or <kbd>.resume()</kbd> methods allows you to resume an animation for a given tween object or collection of tweens, only if it was paused or else will produce no effect.</p>
<pre><code class="language-javascript">playButton.addEventListener('click', function(){
tween.play(); // or tween.resume(); || or myMultiTweens.resume();
}, false);
</code></pre>
<h3>Chaining Tweens</h3>
<p><kbd>.chain()</kbd> method can be used to chain tweens together. When the animation finishes for a given tween, it calls for <code>.start()</code> for another tween(s).</p>
<pre><code class="language-javascript">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);
</code></pre>
<p>It's also possible to chain multiple tweens, just as shown in the below example.</p>
<pre><code class="language-javascript">//chain multiple tweens
tween.chain(tween1,tween2);
</code></pre>
<p>Another thing we talked before is the ability to chain to one of the tween object within the array built with <code>.allTo()</code> or <code>.allFromTo()</code> methods.</p>
<pre><code class="language-javascript">// chain to a tween from collection
var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
// considering the collection has 5 tweens,
// the array is right here tweensCollection.tweens, so
// let's grab the second and chain another tween to it
tweensCollection.tweens[1].chain(tween2);
</code></pre>
<p>Also we can chain the tweens created with <code>.allTo()</code> and <code>.allFromTo()</code> methods like this:</p>
<pre><code class="language-javascript">// chain a collection of tweens to another tween
var tweensCollection2 = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
// the array is right here tweensCollection2.tweens
// we can pass it in the chain of another tween
tween2.chain(tweensCollection2.tweens);
</code></pre>
</div>
<div class="content-wrap">
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div><!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>
<!DOCTYPE html>
<!--[if IE 7]><html class="ie ie7" 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, minimum-scale=1.0">
<meta name="description" content="A detailed API documentation on KUTE.js public methods on how to create tween objects or how to control the tween animation.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,public methods,tween control,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- TO DO -->
<title>KUTE.js Developer API | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li class="active"><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2>Public Methods</h2>
<p>These methods allow you to create <strong>tween objects</strong> and collections of <strong>tween objects</strong>; as we know, a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation
duration, repeat or other options. The methods have different uses and performance scores while making it easy to work with.</p>
<h3>Single Tween Object</h3>
<p>As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements, except when used in combination with jQuery and the KUTE.js plugin for jQuery, where, as jQuery always does, it always works
with collections of elements.</p>
<p><kbd>.to()</kbd> 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 <strong>.fromTo()</strong> method as it has to compute the default/current value on tween <code>.start()</code> and thus delays the animation for a couple of miliseconds; still 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 <a href="#start">.start()</a> method for the solution for sync/delay issue.</p>
<p>Considering a given <em>div</em> element is already transparent, a super quick example would be:</p>
<pre><code class="language-javascript">KUTE.to(div,{opacity:1}).start()</code></pre>
<p>As you might have guessed, this method is useful for creating simple animations such as for scroll, hide/reveal elements, or generally when you don't know the current value of the property you are trying to animate.</p>
<p><kbd>.fromTo()</kbd> method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest method but unlike the <code>.to()</code> method, it does not stack transform properties
on chained tweens. Along with the performance advantage, you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the <a href="features.html">features page</a>. Here's a quick example:</p>
<pre><code class="language-javascript">KUTE.fromTo(div,{opacity:1},{opacity:0}).start()</code></pre>
<h3>Tween Object Collections</h3>
<p>The two new methods allow you to create animations for multiple HTML elements at the same time, all in a single line of code. They use the above methods to create a tween object for each element of the collection and also enable the tween
control methods in this new context.</p>
<p><kbd>.allTo()</kbd> method allows you to create an array of tween objects for a collection of elements. This method is using the above <code>.to()</code> method and inherits it's functionality. Considering a given collection <code>myDivs</code> elements, a nice example would be:</p>
<pre><code class="language-javascript">// on the fly, grab the elements by className,
// do the tween objects array, and start kicking
KUTE.allTo( '.my-div-class', {opacity:1}, {offset: 200, duration: 500} ).start();
// or we cache the objects for better performance and / or later control
var myDivs = document.querySelectorAll('.my-div-class');
var myDivsTweens = KUTE.allTo( myDivs, {opacity:1}, {offset: 200, duration: 500} );
</code></pre>
<p><kbd>.allFromTo()</kbd> method is also a method to animate a collection of elements and it uses the <code>.fromTo()</code> method. Quick example:</p>
<pre><code class="language-javascript">KUTE.allFromTo( myDivs, {opacity:1}, {opacity:0}, {offset: 200, duration: 500} ).start()</code></pre>
<p>As you can see the above code, these methods have a specific tween option called <code>offset</code> that allows you to set a delay in miliseconds between the starting time of each tween animation. Most tween control methods apply to both
methods, except for the <code>.chain()</code> method. In order to chain another tween to one of the <code>myDivsTweens</code> objects, we would need to access it from the array, but let's leave that for later.</p>
</div>
<div class="content-wrap">
<h2>Tween Control Methods</h2>
<p>These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:</p>
<pre><code class="language-javascript">var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});</code></pre>
<p>This tween object is now ready to work with the methods.</p>
<h3 id="start">Starting Animations</h3>
<p><kbd>.start()</kbd> 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. This method also applies to arrays of tween objects created with <code>.allTo()</code> and <code>.allFromTo()</code> methods.</p>
<pre><code class="language-javascript">//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
// lastly the method works with tweens made with .allTo() and .allFromTo() methods
KUTE.allFromTo(divs,{opacity:1},{opacity:0}).start();
KUTE.allTo(divs,{opacity:0}).start();
</code></pre>
<p>As you can see, you can also set a time for the animation to start, example: <code>tween.start(myTimeValue)</code>. 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 <strong>eliminates any syncronization issue</strong> that may occur on animations start, even if you are using the <code>.to()</code> method. The trick is super duper simple:</p>
<pre><code class="language-javascript">// step 1 - create an empty array and grab the elements to animate
var tweens = [], myElements = document.querySelector('.myManyElements'), numberOfElements = myElements.length;
// 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);
}
</code></pre>
<p>In other cases the new methods <code>.allTo()</code> and <code>.allFromTo()</code> can be more useful.</p>
<h3>Stopping Animation</h3>
<p><kbd>.stop()</kbd> method stops animation for a given tween object or an array of tween objects (built with <code>.to()</code>/<code>.fromTo()</code> methods) 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 <code>click</code> action:</p>
<pre><code class="language-javascript">// for a tween object
stopButton.addEventListener('click', function(){
myTween.stop(); // myMultiTweens.stop();
}, false);
</code></pre>
<h3>Pausing Animation</h3>
<p><kbd>.pause()</kbd> method freezez the animation at any given time for a given tween object or collection, and unlike the <code>.stop()</code> method, this one allows resuming the animation on a later use of the next method <code>.play()</code>.</p>
<pre><code class="language-javascript">pauseButton.addEventListener('click', function(){
tween.pause(); // or myMultiTweens.pause();
}, false);
</code></pre>
<h3>Resuming Paused Animation</h3>
<p><kbd>.play()</kbd> or <kbd>.resume()</kbd> methods allows you to resume an animation for a given tween object or collection of tweens, only if it was paused or else will produce no effect.</p>
<pre><code class="language-javascript">playButton.addEventListener('click', function(){
tween.play(); // or tween.resume(); || or myMultiTweens.resume();
}, false);
</code></pre>
<h3>Chaining Tweens</h3>
<p><kbd>.chain()</kbd> method can be used to chain tweens together. When the animation finishes for a given tween, it calls for <code>.start()</code> for another tween(s).</p>
<pre><code class="language-javascript">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);
</code></pre>
<p>It's also possible to chain multiple tweens, just as shown in the below example.</p>
<pre><code class="language-javascript">//chain multiple tweens
tween.chain(tween1,tween2);
</code></pre>
<p>Another thing we talked before is the ability to chain to one of the tween object within the array built with <code>.allTo()</code> or <code>.allFromTo()</code> methods.</p>
<pre><code class="language-javascript">// chain to a tween from collection
var tweensCollection = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
// considering the collection has 5 tweens,
// the array is right here tweensCollection.tweens, so
// let's grab the second and chain another tween to it
tweensCollection.tweens[1].chain(tween2);
</code></pre>
<p>Also we can chain the tweens created with <code>.allTo()</code> and <code>.allFromTo()</code> methods like this:</p>
<pre><code class="language-javascript">// chain a collection of tweens to another tween
var tweensCollection2 = KUTE.allTo('.a-class-for-multiple-elements', {opacity: 1});
// the array is right here tweensCollection2.tweens
// we can pass it in the chain of another tween
tween2.chain(tweensCollection2.tweens);
</code></pre>
</div>
<div class="content-wrap">
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script>
<!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script>
<!-- some stuff -->
</body>
</html>

714
assets/js/minifill.js
View file

@ -1,348 +1,382 @@
// Document
// HTMLDocument is an extension of Document. If the browser has HTMLDocument but not Document, the former will suffice as an alias for the latter.
if (!this.Document){this.Document = this.HTMLDocument; }
// Element
if (!window.HTMLElement) { window.HTMLElement = window.Element; }
// Window
(function(global) {
if (global.constructor) {
global.Window = global.constructor;
} else {
(global.Window = global.constructor = new Function('return function Window() {}')()).prototype = this;
}
}(this));
// Date.now
if(!Date.now){ Date.now = function now() { return new Date().getTime(); }; }
// performance.now
// minifill.js | MIT | dnp_theme
(function(){
if ("performance" in window == false) { window.performance = {}; }
if ("now" in window.performance == false){
var nowOffset = Date.now();
window.performance.now = function now(){
return Date.now() - nowOffset;
}
}
})();
// all repeated strings get a single reference
// document | window | element + corrections
var Doc = 'Document', doc = document, DOCUMENT = this[Doc] || this.HTMLDocument, // IE8
WIN = 'Window', win = window, WINDOW = this.constructor || this[WIN] || Window, // old Safari
HTMLELEMENT = 'HTMLElement', documentElement = 'documentElement', ELEMENT = Element,
// classList related
className = 'className', add = 'add', classList = 'classList', remove = 'remove', contains = 'contains',
// object | array related
prototype = 'prototype', indexOf = 'indexOf', length = 'length',
// performance
now = 'now', performance = 'performance',
// getComputedStyle
getComputedStyle = 'getComputedStyle', currentStyle = 'currentStyle', fontSize = 'fontSize',
// event related
EVENT = 'Event', CustomEvent = 'CustomEvent', IE8EVENTS = '_events',
etype = 'type', target = 'target', currentTarget = 'currentTarget', relatedTarget = 'relatedTarget',
cancelable = 'cancelable', bubbles = 'bubbles', cancelBubble = 'cancelBubble', cancelImmediate = 'cancelImmediate', detail = 'detail',
addEventListener = 'addEventListener', removeEventListener = 'removeEventListener', dispatchEvent = 'dispatchEvent';
// Element
if (!win[HTMLELEMENT]) { win[HTMLELEMENT] = win[ELEMENT]; }
// Array[prototype][indexOf]
if (!Array[prototype][indexOf]) {
Array[prototype][indexOf] = function(searchElement) {
if (this === undefined || this === null) {
throw new TypeError(this + ' is not an object');
}
var arraylike = this instanceof String ? this.split('') : this,
lengthValue = Math.max(Math.min(arraylike[length], 9007199254740991), 0) || 0,
index = Number(arguments[1]) || 0;
index = (index < 0 ? Math.max(lengthValue + index, 0) : index) - 1;
while (++index < lengthValue) {
if (index in arraylike && arraylike[index] === searchElement) {
return index;
}
}
return -1;
};
}
// Date[now]
if(!Date[now]){ Date[now] = function() { return new Date().getTime(); }; }
// performance[now]
(function(){
if (performance in win == false) { win[performance] = {}; }
if (now in win[performance] == false){
var nowOffset = Date[now]();
window[performance][now] = function(){
return Date[now]() - nowOffset;
}
}
})();
// Array.prototype.indexOf
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function indexOf(searchElement) {
if (this === undefined || this === null) {
throw new TypeError(this + 'is not an object');
}
var arraylike = this instanceof String ? this.split('') : this,
length = Math.max(Math.min(arraylike.length, 9007199254740991), 0) || 0,
index = Number(arguments[1]) || 0;
index = (index < 0 ? Math.max(length + index, 0) : index) - 1;
while (++index < length) {
if (index in arraylike && arraylike[index] === searchElement) {
return index;
}
}
return -1;
};
}
// getComputedStyle
if (!(getComputedStyle in win)) {
function getComputedStylePixel(element, property, fontSizeValue) {
// Internet Explorer sometimes struggles to read currentStyle until the element's document is accessed.
var value = element.document && element[currentStyle][property].match(/([\d\.]+)(%|cm|em|in|mm|pc|pt|)/) || [0, 0, ''],
size = value[1],
suffix = value[2],
rootSize;
fontSizeValue = !fontSizeValue ? fontSizeValue : /%|em/.test(suffix) && element.parentElement ? getComputedStylePixel(element.parentElement, 'fontSize', null) : 16;
rootSize = property == 'fontSize' ? fontSizeValue : /width/i.test(property) ? element.clientWidth : element.clientHeight;
return suffix == '%' ? size / 100 * rootSize :
suffix == 'cm' ? size * 0.3937 * 96 :
suffix == 'em' ? size * fontSizeValue :
suffix == 'in' ? size * 96 :
suffix == 'mm' ? size * 0.3937 * 96 / 10 :
suffix == 'pc' ? size * 12 * 96 / 72 :
suffix == 'pt' ? size * 96 / 72 :
size;
}
function setShortStyleProperty(style, property) {
var borderSuffix = property == 'border' ? 'Width' : '',
t = property + 'Top' + borderSuffix,
r = property + 'Right' + borderSuffix,
b = property + 'Bottom' + borderSuffix,
l = property + 'Left' + borderSuffix;
style[property] = (style[t] == style[r] && style[t] == style[b] && style[t] == style[l] ? [ style[t] ] :
style[t] == style[b] && style[l] == style[r] ? [ style[t], style[r] ] :
style[l] == style[r] ? [ style[t], style[r], style[b] ] :
[ style[t], style[r], style[b], style[l] ]).join(' ');
}
// <CSSStyleDeclaration>
function CSSStyleDeclaration(element) {
var style = this,
currentStyleValue = element[currentStyle],
fontSizeValue = getComputedStylePixel(element, fontSize),
unCamelCase = function (match) {
return '-' + match.toLowerCase();
},
property;
for (property in currentStyleValue) {
Array.prototype.push.call(style, property == 'styleFloat' ? 'float' : property.replace(/[A-Z]/, unCamelCase));
if (property == 'width') {
style[property] = element.offsetWidth + 'px';
} else if (property == 'height') {
style[property] = element.offsetHeight + 'px';
} else if (property == 'styleFloat') {
style.float = currentStyleValue[property];
} else if (/margin.|padding.|border.+W/.test(property) && style[property] != 'auto') {
style[property] = Math.round(getComputedStylePixel(element, property, fontSizeValue)) + 'px';
} else if (/^outline/.test(property)) {
// errors on checking outline
try {
style[property] = currentStyleValue[property];
} catch (error) {
style.outlineColor = currentStyleValue.color;
style.outlineStyle = style.outlineStyle || 'none';
style.outlineWidth = style.outlineWidth || '0px';
style.outline = [style.outlineColor, style.outlineWidth, style.outlineStyle].join(' ');
}
} else {
style[property] = currentStyleValue[property];
}
}
setShortStyleProperty(style, 'margin');
setShortStyleProperty(style, 'padding');
setShortStyleProperty(style, 'border');
style[fontSize] = Math.round(fontSizeValue) + 'px';
}
CSSStyleDeclaration[prototype] = {
constructor: CSSStyleDeclaration,
// <CSSStyleDeclaration>.getPropertyPriority
getPropertyPriority: function () {
throw new Error('DOM Exception 9');
},
// <CSSStyleDeclaration>.getPropertyValue
getPropertyValue: function (property) {
return this[property.replace(/-\w/g, function (match) {
return match[1].toUpperCase();
})];
},
// <CSSStyleDeclaration>.item
item: function (index) {
return this[index];
},
// <CSSStyleDeclaration>.removeProperty
removeProperty: function () {
throw new Error('DOM Exception 7');
},
// <CSSStyleDeclaration>.setProperty
setProperty: function () {
throw new Error('DOM Exception 7');
},
// <CSSStyleDeclaration>.getPropertyCSSValue
getPropertyCSSValue: function () {
throw new Error('DOM Exception 9');
}
};
// <Global>.getComputedStyle
win[getComputedStyle] = function(element) {
return new CSSStyleDeclaration(element);
};
}
// getComputedStyle
if (!('getComputedStyle' in window)) {
(function(){
function getComputedStylePixel(element, property, fontSize) {
// Internet Explorer sometimes struggles to read currentStyle until the element's document is accessed.
var value = element.document && element.currentStyle[property].match(/([\d\.]+)(%|cm|em|in|mm|pc|pt|)/) || [0, 0, ''],
size = value[1],
suffix = value[2],
rootSize;
fontSize = !fontSize ? fontSize : /%|em/.test(suffix) && element.parentElement ? getComputedStylePixel(element.parentElement, 'fontSize', null) : 16;
rootSize = property == 'fontSize' ? fontSize : /width/i.test(property) ? element.clientWidth : element.clientHeight;
return suffix == '%' ? size / 100 * rootSize :
suffix == 'cm' ? size * 0.3937 * 96 :
suffix == 'em' ? size * fontSize :
suffix == 'in' ? size * 96 :
suffix == 'mm' ? size * 0.3937 * 96 / 10 :
suffix == 'pc' ? size * 12 * 96 / 72 :
suffix == 'pt' ? size * 96 / 72 :
size;
}
function setShortStyleProperty(style, property) {
var borderSuffix = property == 'border' ? 'Width' : '',
t = property + 'Top' + borderSuffix,
r = property + 'Right' + borderSuffix,
b = property + 'Bottom' + borderSuffix,
l = property + 'Left' + borderSuffix;
style[property] = (style[t] == style[r] && style[t] == style[b] && style[t] == style[l] ? [ style[t] ] :
style[t] == style[b] && style[l] == style[r] ? [ style[t], style[r] ] :
style[l] == style[r] ? [ style[t], style[r], style[b] ] :
[ style[t], style[r], style[b], style[l] ]).join(' ');
}
// <CSSStyleDeclaration>
function CSSStyleDeclaration(element) {
var style = this,
currentStyle = element.currentStyle,
fontSize = getComputedStylePixel(element, 'fontSize'),
unCamelCase = function (match) {
return '-' + match.toLowerCase();
},
property;
for (property in currentStyle) {
Array.prototype.push.call(style, property == 'styleFloat' ? 'float' : property.replace(/[A-Z]/, unCamelCase));
if (property == 'width') {
style[property] = element.offsetWidth + 'px';
} else if (property == 'height') {
style[property] = element.offsetHeight + 'px';
} else if (property == 'styleFloat') {
style.float = currentStyle[property];
} else if (/margin.|padding.|border.+W/.test(property) && style[property] != 'auto') {
style[property] = Math.round(getComputedStylePixel(element, property, fontSize)) + 'px';
} else if (/^outline/.test(property)) {
// errors on checking outline
try {
style[property] = currentStyle[property];
} catch (error) {
style.outlineColor = currentStyle.color;
style.outlineStyle = style.outlineStyle || 'none';
style.outlineWidth = style.outlineWidth || '0px';
style.outline = [style.outlineColor, style.outlineWidth, style.outlineStyle].join(' ');
}
} else {
style[property] = currentStyle[property];
}
}
setShortStyleProperty(style, 'margin');
setShortStyleProperty(style, 'padding');
setShortStyleProperty(style, 'border');
style.fontSize = Math.round(fontSize) + 'px';
}
CSSStyleDeclaration.prototype = {
constructor: CSSStyleDeclaration,
// <CSSStyleDeclaration>.getPropertyPriority
getPropertyPriority: function () {
throw new Error('NotSupportedError: DOM Exception 9');
},
// <CSSStyleDeclaration>.getPropertyValue
getPropertyValue: function (property) {
return this[property.replace(/-\w/g, function (match) {
return match[1].toUpperCase();
})];
},
// <CSSStyleDeclaration>.item
item: function (index) {
return this[index];
},
// <CSSStyleDeclaration>.removeProperty
removeProperty: function () {
throw new Error('NoModificationAllowedError: DOM Exception 7');
},
// <CSSStyleDeclaration>.setProperty
setProperty: function () {
throw new Error('NoModificationAllowedError: DOM Exception 7');
},
// <CSSStyleDeclaration>.getPropertyCSSValue
getPropertyCSSValue: function () {
throw new Error('NotSupportedError: DOM Exception 9');
}
};
// <Global>.getComputedStyle
window.getComputedStyle = function getComputedStyle(element) {
return new CSSStyleDeclaration(element);
};
})();
}
// Element.prototype.classList by thednp
if( !(classList in ELEMENT[prototype]) ) {
var ClassLIST = function(elem){
var classArr = elem[className].replace(/^\s+|\s+$/g,'').split(/\s+/) || [];
// Event
if (!window.Event||!Window.prototype.Event) {
(function (){
window.Event = Window.prototype.Event = Document.prototype.Event = Element.prototype.Event = function Event(type, eventInitDict) {
if (!type) { throw new Error('Not enough arguments'); }
var event,
bubbles = eventInitDict && eventInitDict.bubbles !== undefined ? eventInitDict.bubbles : false,
cancelable = eventInitDict && eventInitDict.cancelable !== undefined ? eventInitDict.cancelable : false;
if ( 'createEvent' in document ) {
event = document.createEvent('Event');
event.initEvent(type, bubbles, cancelable);
} else {
event = document.createEventObject();
event.type = type;
event.bubbles = bubbles;
event.cancelable = cancelable;
}
return event;
};
})();
}
// methods
hasClass = this[contains] = function(classNAME){
return classArr[indexOf](classNAME) > -1;
},
addClass = this[add] = function(classNAME){
if (!hasClass(classNAME)) {
classArr.push(classNAME);
elem[className] = classArr.join(' ');
}
},
removeClass = this[remove] = function(classNAME){
if (hasClass(classNAME)) {
classArr.splice(classArr[indexOf](classNAME),1);
elem[className] = classArr.join(' ');
}
},
toggleClass = this.toggle = function(classNAME){
if ( hasClass(classNAME) ) { removeClass(classNAME); }
else { addClass(classNAME); }
};
}
Object.defineProperty(ELEMENT[prototype], classList, { get: function () { return new ClassLIST(this); } });
}
// CustomEvent
if (!('CustomEvent' in window) || !('CustomEvent' in Window.prototype)) {
(function(){
window.CustomEvent = Window.prototype.CustomEvent = Document.prototype.CustomEvent = Element.prototype.CustomEvent = function CustomEvent(type, eventInitDict) {
if (!type) {
throw Error('TypeError: Failed to construct "CustomEvent": An event name must be provided.');
}
var event = new Event(type, eventInitDict);
event.detail = eventInitDict && eventInitDict.detail || null;
return event;
};
})()
}
// Event
if (!win[EVENT]||!WINDOW[prototype][EVENT]) {
win[EVENT] = WINDOW[prototype][EVENT] = DOCUMENT[prototype][EVENT] = ELEMENT[prototype][EVENT] = function(type, eventInitDict) {
if (!type) { throw new Error('Not enough arguments'); }
var event,
bubblesValue = eventInitDict && eventInitDict[bubbles] !== undefined ? eventInitDict[bubbles] : false,
cancelableValue = eventInitDict && eventInitDict[cancelable] !== undefined ? eventInitDict[cancelable] : false;
if ( 'createEvent' in doc ) {
event = doc.createEvent(EVENT);
event.initEvent(type, bubblesValue, cancelableValue);
} else {
event = doc.createEventObject();
event[etype] = type;
event[bubbles] = bubblesValue;
event[cancelable] = cancelableValue;
}
return event;
};
}
// addEventListener
if (!window.addEventListener||!Window.prototype.addEventListener) {
(function (){
window.addEventListener = Window.prototype.addEventListener = Document.prototype.addEventListener = Element.prototype.addEventListener = function addEventListener() {
var element = this,
type = arguments[0],
listener = arguments[1];
if (!element._events) { element._events = {}; }
if (!element._events[type]) {
element._events[type] = function (event) {
var list = element._events[event.type].list,
events = list.slice(),
index = -1,
length = events.length,
eventElement;
event.preventDefault = function preventDefault() {
if (event.cancelable !== false) {
event.returnValue = false;
}
};
event.stopPropagation = function stopPropagation() {
event.cancelBubble = true;
};
event.stopImmediatePropagation = function stopImmediatePropagation() {
event.cancelBubble = true;
event.cancelImmediate = true;
};
event.currentTarget = element;
event.relatedTarget = event.fromElement || null;
event.target = event.target || event.srcElement || element;
event.timeStamp = new Date().getTime();
if (event.clientX) {
event.pageX = event.clientX + document.documentElement.scrollLeft;
event.pageY = event.clientY + document.documentElement.scrollTop;
}
while (++index < length && !event.cancelImmediate) {
if (index in events) {
eventElement = events[index];
if (list.indexOf(eventElement) !== -1 && typeof eventElement === 'function') {
eventElement.call(element, event);
}
}
}
};
element._events[type].list = [];
if (element.attachEvent) {
element.attachEvent('on' + type, element._events[type]);
}
}
element._events[type].list.push(listener);
};
window.removeEventListener = Window.prototype.removeEventListener = Document.prototype.removeEventListener = Element.prototype.removeEventListener = function removeEventListener() {
var element = this,
type = arguments[0],
listener = arguments[1],
index;
if (element._events && element._events[type] && element._events[type].list) {
index = element._events[type].list.indexOf(listener);
if (index !== -1) {
element._events[type].list.splice(index, 1);
if (!element._events[type].list.length) {
if (element.detachEvent) {
element.detachEvent('on' + type, element._events[type]);
}
delete element._events[type];
}
}
}
};
})();
}
// CustomEvent
if (!(CustomEvent in win) || !(CustomEvent in WINDOW[prototype])) {
win[CustomEvent] = WINDOW[prototype][CustomEvent] = DOCUMENT[prototype][CustomEvent] = Element[prototype][CustomEvent] = function(type, eventInitDict) {
if (!type) {
throw Error('CustomEvent TypeError: An event name must be provided.');
}
var event = new Event(type, eventInitDict);
event[detail] = eventInitDict && eventInitDict[detail] || null;
return event;
};
}
// Event dispatcher / trigger
if (!window.dispatchEvent||!Window.prototype.dispatchEvent||!Document.prototype.dispatchEvent||!Element.prototype.dispatchEvent) {
(function(){
window.dispatchEvent = Window.prototype.dispatchEvent = Document.prototype.dispatchEvent = Element.prototype.dispatchEvent = function dispatchEvent(event) {
if (!arguments.length) {
throw new Error('Not enough arguments');
}
if (!event || typeof event.type !== 'string') {
throw new Error('DOM Events Exception 0');
}
var element = this, type = event.type;
try {
if (!event.bubbles) {
event.cancelBubble = true;
var cancelBubbleEvent = function (event) {
event.cancelBubble = true;
(element || window).detachEvent('on' + type, cancelBubbleEvent);
};
this.attachEvent('on' + type, cancelBubbleEvent);
}
this.fireEvent('on' + type, event);
} catch (error) {
event.target = element;
do {
event.currentTarget = element;
if ('_events' in element && typeof element._events[type] === 'function') {
element._events[type].call(element, event);
}
if (typeof element['on' + type] === 'function') {
element['on' + type].call(element, event);
}
element = element.nodeType === 9 ? element.parentWindow : element.parentNode;
} while (element && !event.cancelBubble);
}
return true;
};
})();
}
// addEventListener | removeEventListener
if (!win[addEventListener]||!WINDOW[prototype][addEventListener]) {
win[addEventListener] = WINDOW[prototype][addEventListener] = DOCUMENT[prototype][addEventListener] = ELEMENT[prototype][addEventListener] = function() {
var element = this,
type = arguments[0],
listener = arguments[1];
if (!element[IE8EVENTS]) { element[IE8EVENTS] = {}; }
if (!element[IE8EVENTS][type]) {
element[IE8EVENTS][type] = function (event) {
var list = element[IE8EVENTS][event[etype]].list,
events = list.slice(),
index = -1,
lengthValue = events[length],
eventElement;
event.preventDefault = function() {
if (event[cancelable] !== false) {
event.returnValue = false;
}
};
event.stopPropagation = function() {
event[cancelBubble] = true;
};
event.stopImmediatePropagation = function() {
event[cancelBubble] = true;
event[cancelImmediate] = true;
};
event[currentTarget] = element;
event[relatedTarget] = event[relatedTarget] || event.fromElement || null;
event[target] = event[target] || event.srcElement || element;
event.timeStamp = new Date().getTime();
if (event.clientX) {
event.pageX = event.clientX + doc[documentElement].scrollLeft;
event.pageY = event.clientY + doc[documentElement].scrollTop;
}
while (++index < lengthValue && !event[cancelImmediate]) {
if (index in events) {
eventElement = events[index];
if (list[indexOf](eventElement) !== -1 && typeof eventElement === 'function') {
eventElement.call(element, event);
}
}
}
};
element[IE8EVENTS][type].list = [];
if (element.attachEvent) {
element.attachEvent('on' + type, element[IE8EVENTS][type]);
}
}
element[IE8EVENTS][type].list.push(listener);
};
win[removeEventListener] = WINDOW[prototype][removeEventListener] = DOCUMENT[prototype][removeEventListener] = ELEMENT[prototype][removeEventListener] = function() {
var element = this,
type = arguments[0],
listener = arguments[1],
index;
if (element[IE8EVENTS] && element[IE8EVENTS][type] && element[IE8EVENTS][type].list) {
index = element[IE8EVENTS][type].list[indexOf](listener);
if (index !== -1) {
element[IE8EVENTS][type].list.splice(index, 1);
if (!element[IE8EVENTS][type].list[length]) {
if (element.detachEvent) {
element.detachEvent('on' + type, element[IE8EVENTS][type]);
}
delete element[IE8EVENTS][type];
}
}
}
};
}
// Event dispatcher
if (!win[dispatchEvent]||!WINDOW[prototype][dispatchEvent]||!DOCUMENT[prototype][dispatchEvent]||!ELEMENT[prototype][dispatchEvent]) {
win[dispatchEvent] = WINDOW[prototype][dispatchEvent] = DOCUMENT[prototype][dispatchEvent] = ELEMENT[prototype][dispatchEvent] = function (event) {
if (!arguments[length]) {
throw new Error('Not enough arguments');
}
if (!event || typeof event[etype] !== 'string') {
throw new Error('DOM Events Exception 0');
}
var element = this, type = event[etype];
try {
if (!event[bubbles]) {
event[cancelBubble] = true;
var cancelBubbleEvent = function (event) {
event[cancelBubble] = true;
(element || win).detachEvent('on' + type, cancelBubbleEvent);
};
this.attachEvent('on' + type, cancelBubbleEvent);
}
this.fireEvent('on' + type, event);
} catch (error) {
event[target] = element;
do {
event[currentTarget] = element;
if (IE8EVENTS in element && typeof element[IE8EVENTS][type] === 'function') {
element[IE8EVENTS][type].call(element, event);
}
if (typeof element['on' + type] === 'function') {
element['on' + type].call(element, event);
}
element = element.nodeType === 9 ? element.parentWindow : element.parentNode;
} while (element && !event[cancelBubble]);
}
return true;
};
}
}());

45
assets/js/scripts.js
View file

@ -3,50 +3,37 @@ function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// utility functions
function addClass(el,c) { // where modern browsers fail, use classList
if (el.classList) { el.classList.add(c); } else { el.className += ' '+c; el.offsetWidth; }
}
function removeClass(el,c) {
if (el.classList) { el.classList.remove(c); } else { el.className = el.className.replace(c,'').replace(/^\s+|\s+$/g,''); el.offsetWidth; }
}
//scroll top?
var toTop = document.getElementById('toTop'),
toTopTween = KUTE.to( 'window', { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500 } );
toTop.addEventListener('click',topHandler,false);
function topHandler(e){
e.preventDefault();
toTopTween.start();
}
toTop.addEventListener('click',topHandler,false);
// toggles utility
var toggles = document.querySelectorAll('[data-function="toggle"]');
for (var i = 0, l = toggles.length; i< l; i ++ ){
toggles[i].addEventListener('click', toggleClass, false);
}
function toggleClass(e){
e.preventDefault();
var pr = this.parentNode;
if (!/open/.test(pr.className)){
addClass(pr,'open');
} else {
removeClass(pr,'open');
}
}
function closeToggles(el){
var pr = el.parentNode;
if (/open/.test(pr.className)){
removeClass(pr,'open');
}
el.classList.remove('open');
}
function classToggles(el){
el.classList.toggle('open');
}
document.addEventListener('click', function(e){
for (var i = 0, l = toggles.length; i< l; i ++ ){
if (toggles[i]!==e.target) closeToggles(toggles[i]);
var target = e.target.parentNode.tagName === 'LI' ? e.target : e.target.parentNode,
parent = target.parentNode;
for (var i = 0, l = toggles.length; i<l; i++ ){
if ( parent.tagName === 'LI' && toggles[i] === target ) {
classToggles(parent);
} else {
closeToggles(toggles[i].parentNode);
}
}
}, false);

279
attr.html
View file

@ -3,7 +3,9 @@
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
<!--[if gte IE 10 | !IE ]><!--> <html lang="en"> <!--<![endif]-->
<!--[if gte IE 10 | !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
@ -12,148 +14,155 @@
<meta name="description" content="The Attributes Plugin for KUTE.js enables animation for any numeric presentation attribute.">
<meta name="keywords" content="kute,kute.js,animation,javascript animations,tweening engine,animation engine,presentation attributes,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- TO DO -->
<title>KUTE.js Attributes Plugin | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li class="active"><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="fill overlay"></div>
<div class="content-wrap">
<h2>Attributes Plugin</h2>
<p>The KUTE.js Attributes Plugin extends the core engine and enables animation for any numeric presentation attribute, with or without a measurement unit or what we know as suffix. The plugin can be a great asset for creating complex animations in combination with the <a href="svg.html">SVG Plugin</a> as we'll see in the following examples. As a quick refference, the basic synthax goes like this:</p>
<div class="site-wrapper">
<pre><code class="language-javascript">// basic synthax for unitless attributes
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li class="active"><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2>Attributes Plugin</h2>
<p>The KUTE.js Attributes Plugin extends the core engine and enables animation for any numeric presentation attribute, with or without a measurement unit or what we know as suffix. The plugin can be a great asset for creating complex animations
in combination with the <a href="svg.html">SVG Plugin</a> as we'll see in the following examples. As a quick refference, the basic synthax goes like this:</p>
<pre><code class="language-javascript">// basic synthax for unitless attributes
var myAttrTween = KUTE.to('selector', {attr: {attributeName: 75}});
// OR for attributes that are ALWAYS suffixed / have a measurement unit
var mySufAttrTween = KUTE.to('selector', {attr:{attributeName: '15%'}});
</code></pre>
<p>The Attributes Plugin does support color attributes such as <code>fill</code> or <code>stroke</code> starting with KUTE.js v1.5.8, but doesn't support attributes with multiple values like <code>stroke-dasharray</code>, <code>viewBox</code> or <code>transform</code> for simplicity reasons. To animate the stroke/fill or transform attribute, the <a href="svg.html">SVG Plugin</a> has some handy solutions for you. Despite the limitations of this plugin, you have access to just about any SVGElement/Element <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute" target="_blank">presentation attribute</a> available.</p>
<p>The Attributes Plugin does support color attributes such as <code>fill</code> or <code>stroke</code> starting with KUTE.js v1.5.8, but doesn't support attributes with multiple values like <code>stroke-dasharray</code>, <code>viewBox</code> or <code>transform</code> for simplicity reasons. To animate the stroke/fill or transform attribute, the <a href="svg.html">SVG Plugin</a> has some handy solutions for you. Despite the limitations of this plugin, you have access to just
about any SVGElement/Element <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute" target="_blank">presentation attribute</a> available.</p>
<h3>Attributes Namespace</h3>
<p>Starting with KUTE.js version 1.5.5, the Attributes Plugin can handle all possible single value attributes with both dashed string and non-dashed string notation. Let's have a look at an example so you can get the idea:</p>
<pre><code class="language-javascript">// dashed attribute notation
<h3>Attributes Namespace</h3>
<p>Starting with KUTE.js version 1.5.5, the Attributes Plugin can handle all possible single value attributes with both dashed string and non-dashed string notation. Let's have a look at an example so you can get the idea:</p>
<pre><code class="language-javascript">// dashed attribute notation
var myDashedAttrStringTween = KUTE.to('selector', {attr: {'stroke-width': 75}});
// non-dashed attribute notation
var myNonDashedAttrStringTween = KUTE.to('selector', {attr:{strokeWidth: '15px'}});
</code></pre>
<p>The <code>strokeWidth</code> example is very interesting because this attribute along with many others can work with <code>px</code>, <code>%</code> or with no unit/suffix.</p>
<h3>Color Attributes</h3>
<p>Starting with KUTE.js version 1.5.7, the Attributes Plugin can also animate color attributes: <code>fill</code>, <code>stroke</code> and <code>stopColor</code>. If the elements are affected by their CSS counterparts, the effect is not visible, so always make sure you know what you're doing.</p>
<pre><code class="language-javascript">// some fill rgb, rgba, hex
<p>The <code>strokeWidth</code> example is very interesting because this attribute along with many others can work with <code>px</code>, <code>%</code> or with no unit/suffix.</p>
<h3>Color Attributes</h3>
<p>Starting with KUTE.js version 1.5.7, the Attributes Plugin can also animate color attributes: <code>fill</code>, <code>stroke</code> and <code>stopColor</code>. If the elements are affected by their CSS counterparts, the effect is not visible,
so always make sure you know what you're doing.</p>
<pre><code class="language-javascript">// some fill rgb, rgba, hex
var fillTween = KUTE.to('#element-to-fill', {attr: { fill: 'red' }});
// some stopColor or 'stop-color'
var stopColorTween = KUTE.to('#element-to-do-stop-color', {attr: {stopColor: 'rgb(0,66,99)'}});
</code></pre>
<div class="featurettes">
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
<div class="featurettes">
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
<path id="fill" fill="#673AB7" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
</svg>
<div class="example-buttons">
<a id="fillBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>If in this example the <code>fill</code> attribute value would reference a gradient, then <i>rgba(0,0,0,0)</i> is used.</p>
<h3>Unitless Attributes</h3>
<p>In the first example, let's play with the attributes of a <code>&lt;circle&gt;</code> element: radius and center coordinates.</p>
<pre><code class="language-javascript">// radius attribute
<div class="example-buttons">
<a id="fillBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>If in this example the <code>fill</code> attribute value would reference a gradient, then <i>rgba(0,0,0,0)</i> is used.</p>
<h3>Unitless Attributes</h3>
<p>In the first example, let's play with the attributes of a <code>&lt;circle&gt;</code> element: radius and center coordinates.</p>
<pre><code class="language-javascript">// radius attribute
var radiusTween = KUTE.to('#circle', {attr: {r: 75}});
// coordinates of the circle center
var coordinatesTween = KUTE.to('#circle', {attr:{cx:0,cy:0}});
</code></pre>
<p>A quick demo with the above:<p>
<div class="featurettes">
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
</code></pre>
<p>A quick demo with the above:
<p>
<div class="featurettes">
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 150">
<circle class="bg-orange" id="circle" cx="75" cy="75" r="40" />
</svg>
<div class="example-buttons">
<a id="circleBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<h3>Suffixed Attributes</h3>
<p>Similar to the example on gradients with <a href="svg.html">SVG Plugin</a>, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the <code>%</code> unit is found in the current value and used as unit for the DOM update:</p>
<pre><code class="language-javascript">// gradient positions to middle
<div class="example-buttons">
<a id="circleBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<h3>Suffixed Attributes</h3>
<p>Similar to the example on gradients with <a href="svg.html">SVG Plugin</a>, we can also animate the gradient positions, and the plugin will make sure to always include the suffix for you, as in this example the <code>%</code> unit
is found in the current value and used as unit for the DOM update:</p>
<pre><code class="language-javascript">// gradient positions to middle
var closingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'49%', y1:'49%', y2:'49%'}});
// gradient positions rotated
var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}});
</code></pre>
<div class="featurettes">
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
<div class="featurettes">
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: #e91b1f; stop-opacity:1"></stop>
@ -161,47 +170,53 @@ var rotatingGradient = KUTE.to('#gradient', {attr: {x1:'49%', x2:'51%', y1:'51%'
</linearGradient>
</defs>
<path fill="url(#gradient)" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
</svg>
<div class="example-buttons">
<a id="gradBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<p>This plugin is quite handy and a great addition to the <a href="svg.html">SVG Plugin</a>.</p>
</div>
<div class="example-buttons">
<a id="gradBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<p>This plugin is quite handy and a great addition to the <a href="svg.html">SVG Plugin</a>.</p>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div><!-- /.site-wrapper -->
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-attr.min.js"></script> <!-- KUTE.js Attributes Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/attr.js"></script> <!-- css plugin examples -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script>
<!-- KUTE.js core -->
<script src="./src/kute-attr.min.js"></script>
<!-- KUTE.js Attributes Plugin -->
<script src="./assets/js/scripts.js"></script>
<!-- global scripts stuff -->
<script src="./assets/js/attr.js"></script>
<!-- css plugin examples -->
</body>
</html>
</html>

354
css.html
View file

@ -3,7 +3,9 @@
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
<!--[if gte IE 10 | !IE ]><!--> <html lang="en"> <!--<![endif]-->
<!--[if gte IE 10 | !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
@ -12,220 +14,232 @@
<meta name="description" content="The CSS Plugin for KUTE.js extends the core engine with additional box model properties, color properties, border-radius, text properties and others.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,css,css3,border-radius,border-color,clip,background-position,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<title>KUTE.js CSS Plugin | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li class="active"><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="fill overlay"></div>
<div class="content-wrap">
<h2>CSS Plugin</h2>
<p>The CSS Plugin extends the KUTE.js core engine and enables animation for additional CSS properties as mentioned in the <a href="examples.html">examples page</a>. The focus is on box model properties like <code>padding</code>, <code>margin</code> or <code>borderWidth</code>, as well as other types of properties like <code>borderRadius</code>, <code>borderColor</code>, <code>backgroundPosition</code>, <code>borderColor</code> or <code>clip</code>.</p>
<h3>Border Radius</h3>
<p>In the example below we are doing some animation on the <code>border-radius</code> property. The first box animates all corners, while the other boxes animate each corner at a time. A quick reminder, for radius properties KUTE.js supports <code>px</code>, <code>%</code> and text properties' units such as <code>em</code> or <code>rem</code>.</p>
<pre><code class="language-javascript">KUTE.to('selector1',{borderRadius:'100%'}).start();
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li class="active"><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2>CSS Plugin</h2>
<p>The CSS Plugin extends the KUTE.js core engine and enables animation for additional CSS properties as mentioned in the <a href="examples.html">examples page</a>. The focus is on box model properties like <code>padding</code>, <code>margin</code> or <code>borderWidth</code>, as well as other types of properties like <code>borderRadius</code>, <code>borderColor</code>, <code>backgroundPosition</code>, <code>borderColor</code> or <code>clip</code>.</p>
<h3>Border Radius</h3>
<p>In the example below we are doing some animation on the <code>border-radius</code> property. The first box animates all corners, while the other boxes animate each corner at a time. A quick reminder, for radius properties KUTE.js supports
<code>px</code>, <code>%</code> and text properties' units such as <code>em</code> or <code>rem</code>.</p>
<pre><code class="language-javascript">KUTE.to('selector1',{borderRadius:'100%'}).start();
KUTE.to('selector2',{borderTopLeftRadius:'100%'}).start();
KUTE.to('selector3',{borderTopRightRadius:'100%'}).start();
KUTE.to('selector4',{borderBottomLeftRadius:'100%'}).start();
KUTE.to('selector5',{borderBottomRightRadius:'100%'}).start();
</code></pre>
</code></pre>
<p>And here is how it looks like:</p>
<p>And here is how it looks like:</p>
<div class="featurettes">
<div id="allRadius" class="example-item example-box bg-red">ALL</div>
<div id="tlRadius" class="example-item example-box bg-pink">TL</div>
<div id="trRadius" class="example-item example-box bg-olive">TR</div>
<div id="blRadius" class="example-item example-box bg-indigo">BL</div>
<div id="brRadius" class="example-item example-box bg-blue">BR</div>
<div class="example-buttons">
<a id="radiusBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>A quick important reminder here is that KUTE.js does not support shorthands for radius properties. Also early implementations by Mozilla's Firefox browser like <code>-moz-border-radius-topleft</code> are not supported because they were depracated with later versions. Download this example <a href='http://codepen.io/thednp/share/zip/VvpypW/'>here</a>.</p>
<h3>Box Model Properties</h3>
<p>The CSS Plugin allows KUTE.js to support almost all the box model properties, but for our example here we will focus mostly on margin and padding, as other properties such as <code>outlineWidth</code>, <code>minWidth</code> or <code>maxHeight</code> require a more complex context and we won't insist on them.</p>
<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{marginTop:200});
<div class="featurettes">
<div id="allRadius" class="example-item example-box bg-red">ALL</div>
<div id="tlRadius" class="example-item example-box bg-pink">TL</div>
<div id="trRadius" class="example-item example-box bg-olive">TR</div>
<div id="blRadius" class="example-item example-box bg-indigo">BL</div>
<div id="brRadius" class="example-item example-box bg-blue">BR</div>
<div class="example-buttons">
<a id="radiusBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>A quick important reminder here is that KUTE.js does not support shorthands for radius properties. Also early implementations by Mozilla's Firefox browser like <code>-moz-border-radius-topleft</code> are not supported because they were depracated
with later versions. Download this example <a href='http://codepen.io/thednp/share/zip/VvpypW/'>here</a>.</p>
<h3>Box Model Properties</h3>
<p>The CSS Plugin allows KUTE.js to support almost all the box model properties, but for our example here we will focus mostly on margin and padding, as other properties such as <code>outlineWidth</code>, <code>minWidth</code> or <code>maxHeight</code> require a more complex context and we won't insist on them.</p>
<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{marginTop:200});
var tween2 = KUTE.to('selector1',{marginBottom:50});
var tween3 = KUTE.to('selector1',{padding:30});
var tween4 = KUTE.to('selector1',{margin:'5%'});
</code></pre>
<p>We're gonna chain these tweens and start the animation. You can download this example <a href='http://codepen.io/thednp/share/zip/xwqYbX/'>here</a>.</p>
<div id="boxModel" class="featurettes">
<div class="example-box example-box-model bg-lime" style="padding: 0; font-size:26px; line-height: 70px;">BOX<br>&nbsp;MODEL&nbsp;</div>
<div class="example-buttons">
<a class="btn btn-orange" href="#">Start</a>
</div>
</div>
<p>TIP: the <code>width</code> and <code>height</code> properties used together can be great for <code>scale</code> animation fallback on images for legacy browsers.</p>
<h3>Text Properties</h3>
<p>OK here we're gonna do a cool example for text properties. Basically the below code would work:</p>
<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{fontSize:'200%'});
<p>We're gonna chain these tweens and start the animation. You can download this example <a href='http://codepen.io/thednp/share/zip/xwqYbX/'>here</a>.</p>
<div id="boxModel" class="featurettes">
<div class="example-box example-box-model bg-lime" style="padding: 0; font-size:26px; line-height: 70px;">BOX<br>&nbsp;MODEL&nbsp;</div>
<div class="example-buttons">
<a class="btn btn-orange" href="#">Start</a>
</div>
</div>
<p>TIP: the <code>width</code> and <code>height</code> properties used together can be great for <code>scale</code> animation fallback on images for legacy browsers.</p>
<h3>Text Properties</h3>
<p>OK here we're gonna do a cool example for text properties. Basically the below code would work:</p>
<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{fontSize:'200%'});
var tween2 = KUTE.to('selector1',{lineHeight:24});
var tween3 = KUTE.to('selector1',{letterSpacing:50});
var tween3 = KUTE.to('selector1',{wordSpacing:50});
</code></pre>
<p>But our example will feature some more than just that. We're gonna animate each character of a given string, with a small delay. The heading will animate <code>fontSize</code> and <code>letterSpacing</code> properties for each character while the button will animate <code>fontSize</code> and <code>lineHeight</code> properties. Watch this:</p>
<div id="textProperties" class="featurettes" style="height: 152px">
<h1 class="example-item">Howdy!</h1>
<a href="javascript:void(0)" class="example-item btn btn-red">Button</a>
<div class="example-buttons"><a class="btn btn-pink" href="javascript:void(0)">Start</a></div>
</div>
<p>TIP: this should also work in Internet Explorer 8 as a fallback for scale animation for text. The above example uses some CSS hacks to enable opacity animation on IE8, so make sure to check <code>assets/css/css.css</code> file for more. This example is not perfect, as legacy browsers don't support the excellent transform functions with subpixel animations, but if it's a must, this would do. Download this example <a href='http://codepen.io/thednp/share/zip/bVqLpb/'>here</a>.</p>
<p>But our example will feature some more than just that. We're gonna animate each character of a given string, with a small delay. The heading will animate <code>fontSize</code> and <code>letterSpacing</code> properties for each character while
the button will animate <code>fontSize</code> and <code>lineHeight</code> properties. Watch this:</p>
<h3>Color Properties</h3>
<p>The next example is about animating all border color properties, since the core engine already supports text <code>color</code> and <code>backgroundColor</code> properties. So check these lines for reference.</p>
<pre><code class="language-javascript">KUTE.to('selector1',{borderColor:'rgb(25,25,25)'}).start();
<div id="textProperties" class="featurettes" style="height: 152px">
<h1 class="example-item">Howdy!</h1>
<a href="javascript:void(0)" class="example-item btn btn-red">Button</a>
<div class="example-buttons"><a class="btn btn-pink" href="javascript:void(0)">Start</a></div>
</div>
<p>TIP: this should also work in Internet Explorer 8 as a fallback for scale animation for text. The above example uses some CSS hacks to enable opacity animation on IE8, so make sure to check <code>assets/css/css.css</code> file for more. This
example is not perfect, as legacy browsers don't support the excellent transform functions with subpixel animations, but if it's a must, this would do. Download this example <a href='http://codepen.io/thednp/share/zip/bVqLpb/'>here</a>.</p>
<h3>Color Properties</h3>
<p>The next example is about animating all border color properties, since the core engine already supports text <code>color</code> and <code>backgroundColor</code> properties. So check these lines for reference.</p>
<pre><code class="language-javascript">KUTE.to('selector1',{borderColor:'rgb(25,25,25)'}).start();
KUTE.to('selector1',{borderTopColor:'#069'}).start();
KUTE.to('selector1',{borderRightColor:'rgba(25,25,25,0.25)'}).start();
KUTE.to('selector1',{borderBottomColor:'red'}).start(); // IE9+ browsers
KUTE.to('selector1',{borderLeftColor:'#069'}).start();
KUTE.to('selector1',{outlineColor:'#069'}).start();
</code></pre>
<p>Let's get some animation going. Download the example <a href='http://codepen.io/thednp/share/zip/OypvNR/'>here</a>.</p>
<div id="colBox" class="featurettes">
<div class="example-item example-box bg-olive" style="outline: #eee solid 5px; width: 135px; height: 135px; border:15px solid #9C27B0; line-height: 105px; font-size:30px">Colors</div>
<div class="example-buttons">
<a class="btn btn-blue" href="#">Start</a>
</div>
</div>
<p>Let's get some animation going. Download the example <a href='http://codepen.io/thednp/share/zip/OypvNR/'>here</a>.</p>
<p>A quick reminder: you can also use <code>RGB</code> or <code>RGBA</code>, but the last one is not supported on IE8 and it will fallback to <code>RGB</code>.</p>
<div id="colBox" class="featurettes">
<div class="example-item example-box bg-olive" style="outline: #eee solid 5px; width: 135px; height: 135px; border:15px solid #9C27B0; line-height: 105px; font-size:30px">Colors</div>
<h3>Clip Property</h3>
<p>This property allows you to animate the rectangular shape of an element that is set to <code>position:absolute</code>. In CSS this property works like this <code>clip: rect(top,right,bottom,left)</code> forming a rectangular shape that masks an element making parts of it invisible.</p>
<pre><code class="language-javascript">KUTE.to('selector',{clip:[0,150,100,0]}).start();</code></pre>
<p>A quick example here could look like this:</p>
<div id="clip" class="featurettes" style="min-height: 190px">
<div class="example-item example-box bg-red" style="position: absolute; background: url('http://img.dummy-image-generator.com/people/dummy-250x250-Eye.jpg') center center no-repeat;"></div>
<div class="example-buttons">
<a class="btn btn-olive" href="#">Start</a>
</div>
</div>
<p><strong>Note</strong> that this would produce no effect for elements that have <code>overflow:visible</code> style rule. Download this example <a href='http://codepen.io/thednp/pen/NGpYmM/'>here</a>.</p>
<div class="example-buttons">
<a class="btn btn-blue" href="#">Start</a>
</div>
</div>
<h3>Background Position</h3>
<p>Another property we can animate with KUTE.js is <code>backgroundPosition</code>. Quick example:</p>
<pre><code class="language-javascript">KUTE.to('selector1',{backgroundPosition:[0,50]}).start();</code></pre>
<p>A working example would look like this:</p>
<div id="bgPos" class="featurettes">
<div class="example-item example-box" style="background: url('http://img.dummy-image-generator.com/abstract/dummy-400x300-Rope.jpg') center center no-repeat;"></div>
<div class="example-buttons">
<a class="btn btn-lime" href="#">Start</a>
</div>
</div>
<p>Download this example <a href='http://codepen.io/thednp/share/zip/EVWEwJ/'>here</a>.</p>
<p>A quick reminder: you can also use <code>RGB</code> or <code>RGBA</code>, but the last one is not supported on IE8 and it will fallback to <code>RGB</code>.</p>
</div>
<h3>Clip Property</h3>
<p>This property allows you to animate the rectangular shape of an element that is set to <code>position:absolute</code>. In CSS this property works like this <code>clip: rect(top,right,bottom,left)</code> forming a rectangular shape that masks
an element making parts of it invisible.</p>
<pre><code class="language-javascript">KUTE.to('selector',{clip:[0,150,100,0]}).start();</code></pre>
<p>A quick example here could look like this:</p>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
<div id="clip" class="featurettes" style="min-height: 190px">
<div class="example-item example-box bg-red" style="position: absolute; background: url('http://img.dummy-image-generator.com/people/dummy-250x250-Eye.jpg') center center no-repeat;"></div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
<div class="example-buttons">
<a class="btn btn-olive" href="#">Start</a>
</div>
</div>
<p><strong>Note</strong> that this would produce no effect for elements that have <code>overflow:visible</code> style rule. Download this example <a href='http://codepen.io/thednp/pen/NGpYmM/'>here</a>.</p>
</div><!-- /.site-wrapper -->
<h3>Background Position</h3>
<p>Another property we can animate with KUTE.js is <code>backgroundPosition</code>. Quick example:</p>
<pre><code class="language-javascript">KUTE.to('selector1',{backgroundPosition:[0,50]}).start();</code></pre>
<p>A working example would look like this:</p>
<div id="bgPos" class="featurettes">
<div class="example-item example-box" style="background: url('http://img.dummy-image-generator.com/abstract/dummy-400x300-Rope.jpg') center center no-repeat;"></div>
<div class="example-buttons">
<a class="btn btn-lime" href="#">Start</a>
</div>
</div>
<p>Download this example <a href='http://codepen.io/thednp/share/zip/EVWEwJ/'>here</a>.</p>
</div>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.min.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/css.js"></script> <!-- css plugin examples -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script>
<!-- KUTE.js core -->
<script src="./src/kute-css.min.js"></script>
<!-- KUTE.js CSS Plugin -->
<script src="./assets/js/scripts.js"></script>
<!-- global scripts stuff -->
<script src="./assets/js/css.js"></script>
<!-- css plugin examples -->
</body>
</html>
</html>

611
easing.html
View file

@ -3,7 +3,9 @@
<!--[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]-->
<!--[if !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
@ -12,323 +14,352 @@
<meta name="description" content="A detailed API documentation on KUTE.js main methods, options and easing functions.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,easing,easing functions,cubic bezier easing,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- TO DO -->
<title>KUTE.js Easing Functions | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li class="active"><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li class="active"><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content-wrap">
<div class="content-wrap">
<h2>Easing Functions</h2>
<p>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.</p>
<p>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, <a href="http://upshots.org/actionscript/jsas-understanding-easing" targt="_blank">here's an excellent resource</a> some developers recommend. I would also recommend <a href="https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3" target="_blank">this one</a> too.</p>
<h3>Core Functions</h3>
<p>Modern browsers that support <code>transition</code> can also make use of some generic easing functions via the CSS3 <code>transition-timing-function:ease-out</code> property, but in Javascript animation, we need some special functions. The popular <a href="robertpenner.com/easing/" target="_blank">Robert Penner's easing functions</a> set 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 <em>circular</em> or <em>exponential</em>, and also the type of progression <em>in</em> and/or <em>out</em>.</p>
<p>To use them, simply set a tween option like so <code>easing: KUTE.Easing.easingSinusoidalInOut</code> or simply <code>easing: 'easingSinusoidalInOut'</code>.</p>
<p><kbd>linear</kbd> 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.</p>
<p><kbd>curve</kbd> based functions are the next set of easings we are going to talk 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):</p>
<ul>
<li><strong>Sinusoidal</strong> - multiplier of 1 (super light object, like a feather)</li>
<li><strong>Quadratic</strong> - multiplier of 2</li>
<li><strong>Cubic</strong> - multiplier of 3</li>
<li><strong>Quartic</strong> - multiplier of 4</li>
<li><strong>Quintic</strong> - multiplier of 5</li>
<li><strong>Circular</strong> - multiplier of 6</li>
<li><strong>Exponential</strong> - multiplier of 10 (super heavy object, like a truck)</li>
</ul>
<p>The In / Out explained:</p>
<ul>
<li><strong>In</strong> - means that the animation starts with very very low speed and gains acceleration over time, but when it reaches the maximum speed, animation stops. These functions are: <kbd>easingSinusoidalIn</kbd>, <kbd>easingQuadraticIn</kbd>,<kbd>easingCubicIn</kbd>, <kbd>easingQuarticIn</kbd>, <kbd>easingQuinticIn</kbd>, <kbd>easingCircularIn</kbd> and <kbd>easingExponentialIn</kbd>.</li>
<li><strong>Out</strong> - means that the animation starts with maximum speed and constantly decelerates over time until the animation stops. These functions are: <kbd>easingSinusoidalOut</kbd>, <kbd>easingQuadraticOut</kbd>, <kbd>easingCubicOut</kbd>, <kbd>easingQuarticOut</kbd>, <kbd>easingQuinticOut</kbd>, <kbd>easingCircularOut</kbd> and <kbd>easingExponentialOut</kbd>.</li>
<li><strong>InOut</strong> - means that the animation accelerates halfway until it reaches the maximum speed, then begins to decelerate until it stops. These functions are: <kbd>easingSinusoidalInOut</kbd>, <kbd>easingQuadraticInOut</kbd>, <kbd>easingCubicInOut</kbd>, <kbd>easingQuarticInOut</kbd>, <kbd>easingQuinticInOut</kbd>, <kbd>easingCircularInOut</kbd> and <kbd>easingExponentialInOut</kbd>.</li>
</ul>
<p><kbd>back</kbd> easing functions describe more complex animations (I would call them <em>reverse gravity</em> easings). They also come with <em>in</em> and/or <em>out</em> types of progression. </p>
<ul>
<li><kbd>easingBackIn</kbd> would be best described when you throw an object into the air with a small amount of physical power, it will move up decelerating until it stops, then will move to the ground with acceleration.</li>
<li><kbd>easingBackOut</kbd> would be best described as the previous function, but viewed in reverse mode.</li>
<li><kbd>easingBackInOut</kbd> is a combination of the other two.</li>
</ul>
<p><kbd>elasticity</kbd> easing functions describe the kind of animation where the object is elastic. With <em>in</em> and/or <em>out</em> as well. </p>
<ul>
<li><kbd>easingElasticOut</kbd> would be best described by the movement of a guitar string after being pinched, moving up and down, with decreasing frequency, until it stops.</li>
<li><kbd>easingElasticIn</kbd> would be best described as the above function but viewed in reverse mode.</li>
<li><kbd>easingElasticInOut</kbd> is simply a combination of the other two.</li>
</ul>
<p><kbd>gravity</kbd> based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With <em>in</em> and/or <em>out</em> as well.</p>
<ul>
<li><kbd>easingBounceOut</kbd> looks just like a ball falling on the ground and start boucing up and down with decreasing frequency untill it stops.</li>
<li><kbd>easingBounceIn</kbd> looks like the previous viewed in reverse mode</li>
<li><kbd>easingBounceInOut</kbd> is a combination of the other two.</li>
</ul>
<h2>Easing Functions</h2>
<p>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.</p>
<p>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, <a href="http://upshots.org/actionscript/jsas-understanding-easing" targt="_blank">here's an excellent resource</a> some developers recommend. I would also recommend
<a href="https://medium.com/@sureshvselvaraj/animation-principles-in-ui-design-understanding-easing-bea05243fe3"
target="_blank">this one</a> too.</p>
<p>Core easing functions examples:</p>
<div class="featurettes">
<div class="example-item easing-example example-box bg-green">Linear</div>
<div class="example-item easing-example example-box bg-pink"></div>
<div class="example-buttons">
<div class="btn-group">
<a class="btn btn-red easingSelectButton" data-function="toggle" href="#">Select</a>
<ul class="easings">
<li>easingSinusoidalIn</li>
<li>easingSinusoidalOut</li>
<li>easingSinusoidalInOut</li>
<li>easingQuadraticIn</li>
<li>easingQuadraticOut</li>
<li>easingQuadraticInOut</li>
<li>easingCubicIn</li>
<li>easingCubicOut</li>
<li>easingCubicInOut</li>
<li>easingQuarticIn</li>
<li>easingQuarticOut</li>
<li>easingQuarticInOut</li>
<li>easingQuinticIn</li>
<li>easingQuinticOut</li>
<li>easingQuinticInOut</li>
<li>easingCircularIn</li>
<li>easingCircularOut</li>
<li>easingCircularInOut</li>
<li>easingExponentialIn</li>
<li>easingExponentialOut</li>
<li>easingExponentialInOut</li>
<li>easingBackIn</li>
<li>easingBackOut</li>
<li>easingBackInOut</li>
<li>easingElasticIn</li>
<li>easingElasticOut</li>
<li>easingElasticInOut</li>
</ul>
</div>
<a class="btn btn-blue startEasingTween" href="#">Start</a>
</div>
</div>
<h3>Cubic Bezier Functions</h3>
<p>While modern browsers support CSS3 <code>transition</code> with <code>transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5)</code>, in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned in the <a href="features.html">features page</a>, we are using a modified version of the <a href="https://github.com/gre/bezier-easing" target="_blank">cubic-bezier</a> by Gaëtan Renaudeau. I believe this must be most accurate easing functions set.</p>
<p>You can use them either with <code>easing: Bezier(mX1, mY1, mX2, mY2)</code> or <code>easing: 'bezier(mX1, mY1, mX2, mY2)'</code>, where mX1, mY1, mX2, mY2 are <em>Float</em> values from 0 to 1. You can find the right values you need <a href="http://cubic-bezier.com/" target="_blank">right here</a>.</p>
<p><span class="text-blue text-strong">NOTE:</span> Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the <a href="https://github.com/thednp/kute.js/tree/experiments">Experiments repository on Github</a>.</p>
<p>There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:</p>
<ul>
<li>Equivalents of the browser's <strong>generic</strong> timing functions: <kbd>easeIn</kbd>, <kbd>easeOut</kbd> and <kbd>easeInOut</kbd></li>
<li><strong>Sinusoidal</strong> timing functions: <kbd>easeInSine</kbd>, <kbd>easeOutSine</kbd> and <kbd>easeInOutSine</kbd></li>
<li><strong>Quadratic</strong> timing functions: <kbd>easeInQuad</kbd>, <kbd>easeOutQuad</kbd> and <kbd>easeInOutQuad</kbd></li>
<li><strong>Cubic</strong> timing functions: <kbd>easeInCubic</kbd>, <kbd>easeOutCubic</kbd> and <kbd>easeInOutCubic</kbd></li>
<li><strong>Quartic</strong> timing functions: <kbd>easeInQuart</kbd>, <kbd>easeInQuart</kbd> and <kbd>easeInOutQuart</kbd></li>
<li><strong>Quintic</strong> timing functions: <kbd>easeInQuint</kbd>, <kbd>easeOutQuint</kbd> and <kbd>easeInOutQuint</kbd></li>
<li><strong>Exponential</strong> timing functions: <kbd>easeInExpo</kbd>, <kbd>easeOutExpo</kbd> and <kbd>easeInOutExpo</kbd></li>
<li><strong>Back</strong> timing functions: <kbd>easeInBack</kbd>, <kbd>easeOutBack</kbd> and <kbd>easeInOutBack</kbd></li>
<li><strong>Special slow motion</strong> timing functions look <a href="http://cubic-bezier.com/#0,.58,1,.3" target="_blank">like this</a>: <kbd>slowMo</kbd>, <kbd>slowMo1</kbd> and <kbd>slowMo2</kbd></li>
</ul>
<p>Cubic-bezier easing functions examples:</p>
<div class="featurettes">
<div class="example-item easing-example example-box bg-green">Linear</div>
<div class="example-item easing-example example-box bg-pink"></div>
<div class="example-buttons">
<div class="btn-group">
<a class="btn btn-red easingSelectButton" data-function="toggle" href="#">Select</a>
<ul class="easings">
<li>bezier(0.15, 0.7, 0.2, 0.9)</li>
<li>bezier(0.25, 0.5, 0.6, 0.7)</li>
<li>bezier(0.35, 0.2, 0.9, 0.2)</li>
<li>easeIn</li>
<li>easeOut</li>
<li>easeInOut</li>
<li>easeInSine</li>
<li>easeOutSine</li>
<li>easeInOutSine</li>
<li>easeInQuad</li>
<li>easeOutQuad</li>
<li>easeInOutQuad</li>
<li>easeInCubic</li>
<li>easeOutCubic</li>
<li>easeInOutCubic</li>
<li>easeInQuart</li>
<li>easeOutQuart</li>
<li>easeInOutQuart</li>
<li>easeInQuint</li>
<li>easeOutQuint</li>
<li>easeInOutQuint</li>
<li>easeInExpo</li>
<li>easeOutExpo</li>
<li>easeInOutExpo</li>
<li>easeInCirc</li>
<li>easeOutCirc</li>
<li>easeInOutCirc</li>
<li>easeInBack</li>
<li>easeOutBack</li>
<li>easeInOutBack</li>
<li>slowMo</li>
<li>slowMo1</li>
<li>slowMo2</li>
</ul>
</div>
<a class="btn btn-blue startEasingTween" href="#">Start</a>
</div>
</div>
<h3>Core Functions</h3>
<p>Modern browsers that support <code>transition</code> can also make use of some generic easing functions via the CSS3 <code>transition-timing-function:ease-out</code> property, but in Javascript animation, we need some special functions. The
popular <a href="robertpenner.com/easing/" target="_blank">Robert Penner's easing functions</a> set 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 <em>circular</em> or <em>exponential</em>, and also the type of progression <em>in</em> and/or <em>out</em>.</p>
<h3>Physics Based Functions</h3>
<p>KUTE.js also packs the <a href="http://dynamicsjs.com/" target="_blank">dynamics physics</a> 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.</p>
<p><span class="text-blue text-strong">NOTE:</span> Starting with KUTE.js v 1.6.0 the Physics Functions are removed from the distribution folder and from CDN repositories, but you can find them in the <a href="https://github.com/thednp/kute.js/tree/experiments">Experiments repository on Github</a>.</p>
<p>You can use them either with regular Javascript invocation as shown below and configure / visualize them on the <a href="http://dynamicsjs.com/" target="_blank">author's website</a>, while you can also use the pack of presets featuring mostly <kbd>bezier</kbd> based functions. Ok now, let's get to it:</p>
<ul>
<li><strong>spring</strong> function is basically an <strong>elastic</strong> type of easing that allows you to set <code>frequency:1-1000</code>, <code>friction:1-1000</code>, <code>anticipationSize:0-1000</code> (a kind of delay in miliseconds) and <code>anticipationStrength:0-1000</code> (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: <code>easing: spring({friction:100,frequency:600})</code>.</li>
<li><strong>bounce</strong> function is also an <strong>elastic</strong> easing function, but it works different than Robert Penner's version that's basically a <kbd>gravity</kbd> based function. This one here will always come back to the starting values. This function allows you to set <code>frequency:0-1000</code> and <code>friction:0-1000</code>. Usage: <code>easing: bounce({friction:100,frequency:600})</code>.</li>
<li><strong>gravity</strong> function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: <code>elasticity:1-1000</code> and <code>bounciness:0-1000</code>. Usage: <code>easing: gravity({elasticity:100,bounciness:600})</code>.</li>
<li><strong>forceWithGravity</strong> function acts just like <code>gravity</code> except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: <code>elasticity:1-1000</code> and <code>bounciness:0-1000</code>. Usage: <code>easing: forceWithGravity({elasticity:100,bounciness:600})</code>.</li>
<li><strong>bezier</strong> easing function is a bit more complicated as it allows you to set multiple points of bezier curves. Usage: <code>easing: BezierMultiPoint({points:POINTS_ARRAY_COMES HERE})</code>, 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 <em>easeIn</em> looks like:
<pre><code class="language-javascript">// sample bezier based easing
<p>To use them, simply set a tween option like so <code>easing: KUTE.Easing.easingSinusoidalInOut</code> or simply <code>easing: 'easingSinusoidalInOut'</code>.</p>
<p><kbd>linear</kbd> 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.</p>
<p><kbd>curve</kbd> based functions are the next set of easings we are going to talk 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):</p>
<ul>
<li><strong>Sinusoidal</strong> - multiplier of 1 (super light object, like a feather)</li>
<li><strong>Quadratic</strong> - multiplier of 2</li>
<li><strong>Cubic</strong> - multiplier of 3</li>
<li><strong>Quartic</strong> - multiplier of 4</li>
<li><strong>Quintic</strong> - multiplier of 5</li>
<li><strong>Circular</strong> - multiplier of 6</li>
<li><strong>Exponential</strong> - multiplier of 10 (super heavy object, like a truck)</li>
</ul>
<p>The In / Out explained:</p>
<ul>
<li><strong>In</strong> - means that the animation starts with very very low speed and gains acceleration over time, but when it reaches the maximum speed, animation stops. These functions are: <kbd>easingSinusoidalIn</kbd>, <kbd>easingQuadraticIn</kbd>,<kbd>easingCubicIn</kbd>,
<kbd>easingQuarticIn</kbd>, <kbd>easingQuinticIn</kbd>, <kbd>easingCircularIn</kbd> and <kbd>easingExponentialIn</kbd>.</li>
<li><strong>Out</strong> - means that the animation starts with maximum speed and constantly decelerates over time until the animation stops. These functions are: <kbd>easingSinusoidalOut</kbd>, <kbd>easingQuadraticOut</kbd>, <kbd>easingCubicOut</kbd>,
<kbd>easingQuarticOut</kbd>, <kbd>easingQuinticOut</kbd>, <kbd>easingCircularOut</kbd> and <kbd>easingExponentialOut</kbd>.</li>
<li><strong>InOut</strong> - means that the animation accelerates halfway until it reaches the maximum speed, then begins to decelerate until it stops. These functions are: <kbd>easingSinusoidalInOut</kbd>, <kbd>easingQuadraticInOut</kbd>,
<kbd>easingCubicInOut</kbd>, <kbd>easingQuarticInOut</kbd>, <kbd>easingQuinticInOut</kbd>, <kbd>easingCircularInOut</kbd> and <kbd>easingExponentialInOut</kbd>.</li>
</ul>
<p><kbd>back</kbd> easing functions describe more complex animations (I would call them <em>reverse gravity</em> easings). They also come with <em>in</em> and/or <em>out</em> types of progression. </p>
<ul>
<li><kbd>easingBackIn</kbd> would be best described when you throw an object into the air with a small amount of physical power, it will move up decelerating until it stops, then will move to the ground with acceleration.</li>
<li><kbd>easingBackOut</kbd> would be best described as the previous function, but viewed in reverse mode.</li>
<li><kbd>easingBackInOut</kbd> is a combination of the other two.</li>
</ul>
<p><kbd>elasticity</kbd> easing functions describe the kind of animation where the object is elastic. With <em>in</em> and/or <em>out</em> as well. </p>
<ul>
<li><kbd>easingElasticOut</kbd> would be best described by the movement of a guitar string after being pinched, moving up and down, with decreasing frequency, until it stops.</li>
<li><kbd>easingElasticIn</kbd> would be best described as the above function but viewed in reverse mode.</li>
<li><kbd>easingElasticInOut</kbd> is simply a combination of the other two.</li>
</ul>
<p><kbd>gravity</kbd> based easing functions describe the kind of animation where the object has a certain degree of bounciness, like a ball. With <em>in</em> and/or <em>out</em> as well.</p>
<ul>
<li><kbd>easingBounceOut</kbd> looks just like a ball falling on the ground and start boucing up and down with decreasing frequency untill it stops.</li>
<li><kbd>easingBounceIn</kbd> looks like the previous viewed in reverse mode</li>
<li><kbd>easingBounceInOut</kbd> is a combination of the other two.</li>
</ul>
<p>Core easing functions examples:</p>
<div class="featurettes">
<div class="example-item easing-example example-box bg-green">Linear</div>
<div class="example-item easing-example example-box bg-pink"></div>
<div class="example-buttons">
<div class="btn-group">
<a class="btn btn-red easingSelectButton" data-function="toggle" href="#">Select</a>
<ul class="easings">
<li>easingSinusoidalIn</li>
<li>easingSinusoidalOut</li>
<li>easingSinusoidalInOut</li>
<li>easingQuadraticIn</li>
<li>easingQuadraticOut</li>
<li>easingQuadraticInOut</li>
<li>easingCubicIn</li>
<li>easingCubicOut</li>
<li>easingCubicInOut</li>
<li>easingQuarticIn</li>
<li>easingQuarticOut</li>
<li>easingQuarticInOut</li>
<li>easingQuinticIn</li>
<li>easingQuinticOut</li>
<li>easingQuinticInOut</li>
<li>easingCircularIn</li>
<li>easingCircularOut</li>
<li>easingCircularInOut</li>
<li>easingExponentialIn</li>
<li>easingExponentialOut</li>
<li>easingExponentialInOut</li>
<li>easingBackIn</li>
<li>easingBackOut</li>
<li>easingBackInOut</li>
<li>easingElasticIn</li>
<li>easingElasticOut</li>
<li>easingElasticInOut</li>
</ul>
</div>
<a class="btn btn-blue startEasingTween" href="#">Start</a>
</div>
</div>
<h3>Cubic Bezier Functions</h3>
<p>While modern browsers support CSS3 <code>transition</code> with <code>transition-timing-function: cubic-bezier(0.1,0.5,0.8,0.5)</code>, in Javascript animation we need some specific functions to cover that kind of functionality. As mentioned
in the <a href="features.html">features page</a>, we are using a modified version of the <a href="https://github.com/gre/bezier-easing" target="_blank">cubic-bezier</a> by Gaëtan Renaudeau. I believe this must be most accurate easing functions
set.</p>
<p>You can use them either with <code>easing: Bezier(mX1, mY1, mX2, mY2)</code> or <code>easing: 'bezier(mX1, mY1, mX2, mY2)'</code>, where mX1, mY1, mX2, mY2 are <em>Float</em> values from 0 to 1. You can find the right values you need
<a href="http://cubic-bezier.com/"
target="_blank">right here</a>.</p>
<p><span class="text-blue text-strong">NOTE:</span> Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the <a href="https://github.com/thednp/kute.js/tree/experiments">Experiments repository on Github</a>.</p>
<p>There is also a pack of presets, and the keywords look very similar if you have used jQuery.Easing plugin before:</p>
<ul>
<li>Equivalents of the browser's <strong>generic</strong> timing functions: <kbd>easeIn</kbd>, <kbd>easeOut</kbd> and <kbd>easeInOut</kbd></li>
<li><strong>Sinusoidal</strong> timing functions: <kbd>easeInSine</kbd>, <kbd>easeOutSine</kbd> and <kbd>easeInOutSine</kbd></li>
<li><strong>Quadratic</strong> timing functions: <kbd>easeInQuad</kbd>, <kbd>easeOutQuad</kbd> and <kbd>easeInOutQuad</kbd></li>
<li><strong>Cubic</strong> timing functions: <kbd>easeInCubic</kbd>, <kbd>easeOutCubic</kbd> and <kbd>easeInOutCubic</kbd></li>
<li><strong>Quartic</strong> timing functions: <kbd>easeInQuart</kbd>, <kbd>easeInQuart</kbd> and <kbd>easeInOutQuart</kbd></li>
<li><strong>Quintic</strong> timing functions: <kbd>easeInQuint</kbd>, <kbd>easeOutQuint</kbd> and <kbd>easeInOutQuint</kbd></li>
<li><strong>Exponential</strong> timing functions: <kbd>easeInExpo</kbd>, <kbd>easeOutExpo</kbd> and <kbd>easeInOutExpo</kbd></li>
<li><strong>Back</strong> timing functions: <kbd>easeInBack</kbd>, <kbd>easeOutBack</kbd> and <kbd>easeInOutBack</kbd></li>
<li><strong>Special slow motion</strong> timing functions look <a href="http://cubic-bezier.com/#0,.58,1,.3" target="_blank">like this</a>: <kbd>slowMo</kbd>, <kbd>slowMo1</kbd> and <kbd>slowMo2</kbd></li>
</ul>
<p>Cubic-bezier easing functions examples:</p>
<div class="featurettes">
<div class="example-item easing-example example-box bg-green">Linear</div>
<div class="example-item easing-example example-box bg-pink"></div>
<div class="example-buttons">
<div class="btn-group">
<a class="btn btn-red easingSelectButton" data-function="toggle" href="#">Select</a>
<ul class="easings">
<li>bezier(0.15, 0.7, 0.2, 0.9)</li>
<li>bezier(0.25, 0.5, 0.6, 0.7)</li>
<li>bezier(0.35, 0.2, 0.9, 0.2)</li>
<li>easeIn</li>
<li>easeOut</li>
<li>easeInOut</li>
<li>easeInSine</li>
<li>easeOutSine</li>
<li>easeInOutSine</li>
<li>easeInQuad</li>
<li>easeOutQuad</li>
<li>easeInOutQuad</li>
<li>easeInCubic</li>
<li>easeOutCubic</li>
<li>easeInOutCubic</li>
<li>easeInQuart</li>
<li>easeOutQuart</li>
<li>easeInOutQuart</li>
<li>easeInQuint</li>
<li>easeOutQuint</li>
<li>easeInOutQuint</li>
<li>easeInExpo</li>
<li>easeOutExpo</li>
<li>easeInOutExpo</li>
<li>easeInCirc</li>
<li>easeOutCirc</li>
<li>easeInOutCirc</li>
<li>easeInBack</li>
<li>easeOutBack</li>
<li>easeInOutBack</li>
<li>slowMo</li>
<li>slowMo1</li>
<li>slowMo2</li>
</ul>
</div>
<a class="btn btn-blue startEasingTween" href="#">Start</a>
</div>
</div>
<h3>Physics Based Functions</h3>
<p>KUTE.js also packs the <a href="http://dynamicsjs.com/" target="_blank">dynamics physics</a> 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.</p>
<p><span class="text-blue text-strong">NOTE:</span> Starting with KUTE.js v 1.6.0 the Physics Functions are removed from the distribution folder and from CDN repositories, but you can find them in the <a href="https://github.com/thednp/kute.js/tree/experiments">Experiments repository on Github</a>.</p>
<p>You can use them either with regular Javascript invocation as shown below and configure / visualize them on the <a href="http://dynamicsjs.com/" target="_blank">author's website</a>, while you can also use the pack of presets featuring mostly
<kbd>bezier</kbd> based functions. Ok now, let's get to it:</p>
<ul>
<li><strong>spring</strong> function is basically an <strong>elastic</strong> type of easing that allows you to set <code>frequency:1-1000</code>, <code>friction:1-1000</code>, <code>anticipationSize:0-1000</code> (a kind of delay in miliseconds)
and <code>anticipationStrength:0-1000</code> (a kind of a new curve to add to the function while waiting the anticipationSize). Usage: <code>easing: spring({friction:100,frequency:600})</code>.</li>
<li><strong>bounce</strong> function is also an <strong>elastic</strong> easing function, but it works different than Robert Penner's version that's basically a <kbd>gravity</kbd> based function. This one here will always come back to the
starting values. This function allows you to set <code>frequency:0-1000</code> and <code>friction:0-1000</code>. Usage: <code>easing: bounce({friction:100,frequency:600})</code>.</li>
<li><strong>gravity</strong> function does what a ball dropped on the ground does, bounces until it stops. It allows you to set: <code>elasticity:1-1000</code> and <code>bounciness:0-1000</code>. Usage: <code>easing: gravity({elasticity:100,bounciness:600})</code>.</li>
<li><strong>forceWithGravity</strong> function acts just like <code>gravity</code> except that the ball instead of being dropped it's thrown into the air. This allows you to set same options: <code>elasticity:1-1000</code> and <code>bounciness:0-1000</code>.
Usage: <code>easing: forceWithGravity({elasticity:100,bounciness:600})</code>.</li>
<li><strong>bezier</strong> easing function is a bit more complicated as it allows you to set multiple points of bezier curves. Usage: <code>easing: BezierMultiPoint({points:POINTS_ARRAY_COMES HERE})</code>, 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 <em>easeIn</em> looks like:
<pre><code class="language-javascript">// sample bezier based easing
easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
</code></pre>
In other cases, the bezier can handle multiple points as well, basically unlimited:
<pre><code class="language-javascript">// multi point bezier easing
</code></pre> In other cases, the bezier can handle multiple points as well, basically unlimited:
<pre><code class="language-javascript">// multi point bezier easing
easing: BezierMultiPoint({points: [{"x":0,"y":0,"cp":[{"x":0.387,"y":0.007}]},{"x":0.509,"y":0.48,"cp":[{"x":0.069,"y":0.874},{"x":0.928,"y":0.139}]},{"x":1,"y":1,"cp":[{"x":0.639,"y":0.988}]}] });
</code></pre>
</li>
</ul>
<p>The presets can be used both as a string <code>easing:'physicsIn'</code> or <code>easing: Physics.physicsIn(friction:200)</code>. The list is:</p>
<ul>
<li><strong>curves</strong>: <kbd>physicsIn</kbd>, <kbd>physicsOut</kbd>, <kbd>physicsInOut</kbd> can do all multipliers (from sinusoidal to exponential) via the <code>friction</code> option;</li>
<li><strong>back</strong>: <kbd>physicsBackIn</kbd>, <kbd>physicsBackOut</kbd>, <kbd>physicsBackInOut</kbd> also benefit from the <code>friction</code> option.</li>
</ul>
<p>Physics easing functions examples:</p>
<div class="featurettes">
<div class="example-item easing-example example-box bg-green">Linear</div>
<div class="example-item easing-example example-box bg-pink"></div>
<div class="example-buttons">
<div class="btn-group">
<a class="btn btn-red easingSelectButton" data-function="toggle" href="#">Select</a>
<ul class="easings">
<li>physicsIn</li>
<li>physicsOut</li>
<li>physicsInOut</li>
<li>physicsBackIn</li>
<li>physicsBackOut</li>
<li>physicsBackInOut</li>
<li>spring</li>
<li>bounce</li>
<li>gravity</li>
<li>forceWithGravity</li>
<li>bezier</li>
<li>multiPointBezier</li>
</ul>
</div>
<a class="btn btn-blue startEasingTween" href="#">Start</a>
</div>
</div>
</div>
</code></pre>
</li>
</ul>
<p>The presets can be used both as a string <code>easing:'physicsIn'</code> or <code>easing: Physics.physicsIn(friction:200)</code>. The list is:</p>
<ul>
<li><strong>curves</strong>: <kbd>physicsIn</kbd>, <kbd>physicsOut</kbd>, <kbd>physicsInOut</kbd> can do all multipliers (from sinusoidal to exponential) via the <code>friction</code> option;</li>
<li><strong>back</strong>: <kbd>physicsBackIn</kbd>, <kbd>physicsBackOut</kbd>, <kbd>physicsBackInOut</kbd> also benefit from the <code>friction</code> option.</li>
</ul>
<p>Physics easing functions examples:</p>
<div class="featurettes">
<div class="example-item easing-example example-box bg-green">Linear</div>
<div class="example-item easing-example example-box bg-pink"></div>
<div class="content-wrap">
<div class="example-buttons">
<div class="btn-group">
<a class="btn btn-red easingSelectButton" data-function="toggle" href="#">Select</a>
<ul class="easings">
<li>physicsIn</li>
<li>physicsOut</li>
<li>physicsInOut</li>
<li>physicsBackIn</li>
<li>physicsBackOut</li>
<li>physicsBackInOut</li>
<li>spring</li>
<li>bounce</li>
<li>gravity</li>
<li>forceWithGravity</li>
<li>bezier</li>
<li>multiPointBezier</li>
</ul>
</div>
<a class="btn btn-blue startEasingTween" href="#">Start</a>
</div>
</div>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
</div><!-- /.site-wrapper -->
<div class="content-wrap">
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/kute-bezier.min.js"></script> <!-- KUTE.js Bezier Easing -->
<script src="./assets/js/kute-physics.min.js"></script> <!-- KUTE.js Physics Easing -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/easing.js"></script> <!-- examples stuff -->
<script src="./src/kute.min.js"></script>
<!-- KUTE.js core -->
<script src="./assets/js/kute-bezier.min.js"></script>
<!-- KUTE.js Bezier Easing -->
<script src="./assets/js/kute-physics.min.js"></script>
<!-- KUTE.js Physics Easing -->
<script src="./assets/js/scripts.js"></script>
<!-- global scripts stuff -->
<script src="./assets/js/easing.js"></script>
<!-- examples stuff -->
</body>
</html>
</html>

1040
examples.html
View file

File diff suppressed because it is too large Load diff

345
extend.html
View file

@ -3,7 +3,9 @@
<!--[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]-->
<!--[if !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
@ -12,82 +14,81 @@
<meta name="description" content="A detailed guide how to extend or customize the functionality KUTE.js, with an example for a box-shadow plugin.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,extend,box-shadow animation,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<title>Extending KUTE.js | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<script src="./assets/js/minifill.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li class="active"><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="fill overlay"></div>
<div class="content-wrap">
<h2>Extend Guide</h2>
<p>KUTE.js is a very flexible animation engine that allows you to extend beyond measure. In this tutorial we'll dig into what's best to do to extend/customize the functionality of KUTE.js core, plugins and features.</p>
<div class="site-wrapper">
<h3>Basic Plugin Template</h3>
<p>The best way to extend, no matter what you would like to achieve is to use a specific closure, here's an example:</p>
<pre><code class="language-javascript">/* KUTE.js - The Light Tweening Engine
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li class="active"><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2>Extend Guide</h2>
<p>KUTE.js is a very flexible animation engine that allows you to extend beyond measure. In this tutorial we'll dig into what's best to do to extend/customize the functionality of KUTE.js core, plugins and features.</p>
<h3>Basic Plugin Template</h3>
<p>The best way to extend, no matter what you would like to achieve is to use a specific closure, here's an example:</p>
<pre><code class="language-javascript">/* KUTE.js - The Light Tweening Engine
* by dnp_theme
* package - pluginName
* desc - what your plugin does
@ -100,25 +101,25 @@
define(['kute.js'], factory);
} else if(typeof module == 'object' && typeof require == 'function') {
module.exports = factory(require('kute.js'));
} else if ( typeof root.KUTE !== 'undefined' ) {
} else if ( typeof root.KUTE !== 'undefined' ) {
factory(root.KUTE);
} else {
throw new Error("pluginName require KUTE.js.");
}
}(this, function (KUTE) {
// your code goes here
// in this function body
// the plugin returns this
return this;
}));
</code></pre>
<p>As suggested in the above template, your function body could be written with one or more of the examples below.</p>
<h3>Extend Tween Control</h3>
<p>In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check <code>Tween</code> function to get the internal references notation:</p>
<pre><code class="language-javascript">//add a reference to _tween function
<p>As suggested in the above template, your function body could be written with one or more of the examples below.</p>
<h3>Extend Tween Control</h3>
<p>In some cases, you may want to extend with additional tween control methods, so before you do that, make sure to check <code>Tween</code> function to get the internal references notation:</p>
<pre><code class="language-javascript">//add a reference to _tween function
var Tween = KUTE.Tween;
// let's add a timescale method
@ -155,28 +156,31 @@ Tween.prototype.restart = function(){
// methods to queue callbacks with ease
Tween.prototype.onUpdate = function(){
this.options.update = arguments;
this.options.update = arguments;
return this;
}
</code></pre>
<p>For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very specific need.</p>
<h3>Support For Additional CSS Properties</h3>
<p>KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and you'll master it real quick, it's very easy.</p>
<p>We need basically 3 functions:</p>
<ul>
<li><code>KUTE.prepareStart['propertyName']</code> <kbd class="bg-red">required</kbd> a function to get the current value of the property required for the <code>.to()</code> method;</li>
<li><code>KUTE.parseProperty['propertyName']</code> <kbd class="bg-red">required</kbd> a function to process the user value / current value to have it ready to tween;</li>
<li><code>KUTE.dom['propertyName']</code> <kbd class="bg-red">required</kbd> a <strong>domUpdate</strong> function that will update the property value into the DOM;</li>
<li><code>KUTE.crossCheck['propertyName']</code> <kbd class="bg-green">optional</kbd> a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;</li>
<li>also <kbd class="bg-green">optional</kbd> additional functions that will help with value processing.</li>
</ul>
<p>So let's add support for <kbd class="bg-olive">boxShadow</kbd>! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template and let's break it down to pieces:</p>
<pre><code class="language-javascript">// add a reference to global and KUTE object
var g = typeof global !== 'undefined' ? global : window, K = KUTE,
<p>For some reasons these methods aren't included into the core/plugins by default, but let you decide what you need and how to customize the animation engine for your very specific need.</p>
<h3>Support For Additional CSS Properties</h3>
<p>KUTE.js core engine and plugins cover what I consider to be most essential for animation, but you may have a different opinion. In case you may want to know how to animate properties that are not currently supported, stick to this guide and
you'll master it real quick, it's very easy.</p>
<p>We need basically 3 functions:</p>
<ul>
<li><code>KUTE.prepareStart['propertyName']</code> <kbd class="bg-red">required</kbd> a function to get the current value of the property required for the <code>.to()</code> method;</li>
<li><code>KUTE.parseProperty['propertyName']</code> <kbd class="bg-red">required</kbd> a function to process the user value / current value to have it ready to tween;</li>
<li><code>KUTE.dom['propertyName']</code> <kbd class="bg-red">required</kbd> a <strong>domUpdate</strong> function that will update the property value into the DOM;</li>
<li><code>KUTE.crossCheck['propertyName']</code> <kbd class="bg-green">optional</kbd> a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms
and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;</li>
<li>also <kbd class="bg-green">optional</kbd> additional functions that will help with value processing.</li>
</ul>
<p>So let's add support for <kbd class="bg-olive">boxShadow</kbd>! It should be a medium difficulty guide most developers can follow and the purpose of this guide is to showcase how easy it actually is to extend KUTE.js. So grab the above template
and let's break it down to pieces:</p>
<pre><code class="language-javascript">// add a reference to global and KUTE object
var g = typeof global !== 'undefined' ? global : window, K = KUTE,
// add a reference to KUTE utilities
prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
property = K.property, parseProperty = K.parseProperty, trueColor = K.truC,
DOM = K.dom, color = g.Interpolate.color, unit = g.Interpolate.unit; // interpolation functions
@ -189,8 +193,8 @@ var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}
// for browsers that don't support the property, use a filter
// if (!(_boxShadow in document.body.style)) {return;}
</code></pre>
<p>Now we have access to the KUTE object, prototypes and it's utility functions, let's write a <code>prepareStart</code> function that will read the current <code>boxShadow</code> value:</p>
<pre><code class="language-javascript">// for the .to() method, you need to prepareStart the boxShadow property
<p>Now we have access to the KUTE object, prototypes and it's utility functions, let's write a <code>prepareStart</code> function that will read the current <code>boxShadow</code> value:</p>
<pre><code class="language-javascript">// for the .to() method, you need to prepareStart the boxShadow property
// which means you need to read the current computed value
// if the current computed value is not acceptable, use a default value
prepareStart['boxShadow'] = function(property,value){
@ -204,13 +208,14 @@ prepareStart['boxShadow'] = function(property,value){
// also to read the current value of an attribute, replace first line of the above function body with this
// var attrValue = element.getAttribute(property);
// and return the value or a default value, mostly rgb(0,0,0) for colors, 1 for opacity, or 0 for most other types
// and return the value or a default value, mostly rgb(0,0,0) for colors, 1 for opacity, or 0 for most other types
</code></pre>
<p>Since KUTE.js 1.6.0, the tween object is bound to all property parsing utilities, meaning that you have access to <code>this</code> that has the target element, options, start and end values and everything else. This is extremely useful if you want to optimize and/or extend particular properties values, the dom update functions, and even override the property name</p>
<p>Since KUTE.js 1.6.0, the tween object is bound to all property parsing utilities, meaning that you have access to <code>this</code> that has the target element, options, start and end values and everything else. This is extremely useful if
you want to optimize and/or extend particular properties values, the dom update functions, and even override the property name</p>
<p>Now we need an utility function that makes sure the structure looks right for the DOM update function.</p>
<pre><code class="language-javascript">// utility function to process values accordingly
<p>Now we need an utility function that makes sure the structure looks right for the DOM update function.</p>
<pre><code class="language-javascript">// utility function to process values accordingly
// numbers must be floats/integers and color must be rgb object
var processBoxShadowArray = function(shadow){
var newShadow;
@ -220,44 +225,45 @@ var processBoxShadowArray = function(shadow){
} else if (shadow.length === 4) { // [h-shadow, v-shadow, color, inset] | [h-shadow, v-shadow, blur, color]
newShadow = /inset|none/.test(shadow[3]) ? [shadow[0], shadow[1], 0, 0, shadow[2], shadow[3]] : [shadow[0], shadow[1], shadow[2], 0, shadow[3], 'none'];
} else if (shadow.length === 5) { // [h-shadow, v-shadow, blur, color, inset] | [h-shadow, v-shadow, blur, spread, color]
newShadow = /inset|none/.test(shadow[4]) ? [shadow[0], shadow[1], shadow[2], 0, shadow[3], shadow[4]] : [shadow[0], shadow[1], shadow[2], shadow[3], shadow[4], 'none'];
newShadow = /inset|none/.test(shadow[4]) ? [shadow[0], shadow[1], shadow[2], 0, shadow[3], shadow[4]] : [shadow[0], shadow[1], shadow[2], shadow[3], shadow[4], 'none'];
} else if (shadow.length === 6) { // ideal [h-shadow, v-shadow, blur, spread, color, inset]
newShadow = shadow;
}
newShadow = shadow;
}
// make sure the numbers are ready to tween
for (var i=0; i&lt;4; i++){
newShadow[i] = parseFloat(newShadow[i]);
newShadow[i] = parseFloat(newShadow[i]);
}
// make sure color is an rgb object
newShadow[4] = trueColor(newShadow[4]); // where K.truC()/trueColor is a core method to return the true color in rgb object format
return newShadow;
};
</code></pre>
</code></pre>
<p>Next we'll need to write a <code>parseProperty</code> function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the <code>KUTE.dom['boxShadow']</code> function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.</p>
<pre><code class="language-javascript">// the parseProperty for boxShadow
// registers the window.dom['boxShadow'] function
<p>Next we'll need to write a <code>parseProperty</code> function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the <code>KUTE.dom['boxShadow']</code> function into the
KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.</p>
<pre><code class="language-javascript">// the parseProperty for boxShadow
// registers the window.dom['boxShadow'] function
// returns an array of 6 values in the following format
// [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
parseProperty['boxShadow'] = function(property,value,element){
// the DOM update function for boxShadow registers here
// we only enqueue it if the boxShadow property is used to tween
if ( !('boxShadow' in DOM) ) {
DOM['boxShadow'] = function(element,property,startValue,endValue,progress) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress
DOM['boxShadow'] = function(element,property,startValue,endValue,progress) { // element, propertyName, valuesStart.boxShadow, valuesEnd.boxShadow, progress
// let's start with the numbers | set unit | also determine inset
var numbers = [], px = 'px', // the unit is always px
inset = startValue[5] !== 'none' || endValue[5] !== 'none' ? ' inset' : false;
inset = startValue[5] !== 'none' || endValue[5] !== 'none' ? ' inset' : false;
for (var i=0; i&lt;4; i++){ // for boxShadow coordinates we do the math for an array of numbers
for (var i=0; i&lt;4; i++){ // for boxShadow coordinates we do the math for an array of numbers
numbers.push( unit(startValue[i], endValue[i], px, progress) );
}
// now we handle the color
var colorValue = color(startValue[4],endValue[4],progress);
// last piece of the puzzle, the DOM update
element.style[_boxShadow] = inset ? colorValue + numbers.join(' ') + inset : colorValue + numbers.join(' ');
};
@ -271,9 +277,9 @@ parseProperty['boxShadow'] = function(property,value,element){
value = /inset/.test(value) ? value.replace(/(\s+inset|inset+\s)/g,'') : value;
// also getComputedStyle often returns color first "rgb(0, 0, 0) 15px 15px 6px 0px inset"
shadowColor = value.match(colRegEx);
shadowColor = value.match(colRegEx);
value = value.replace(shadowColor[0],'').split(' ').concat([shadowColor[0].replace(/\s/g,'')],[inset]);
// now we can use the above specific utitlity
value = processBoxShadowArray(value);
} else if (value instanceof Array){
@ -283,8 +289,8 @@ parseProperty['boxShadow'] = function(property,value,element){
}
</code></pre>
<p>And now, we are ready to tween both <code>.to()</code> and <code>.fromTo()</code> methods:</p>
<pre><code class="language-javascript">// tween to a string value
<p>And now, we are ready to tween both <code>.to()</code> and <code>.fromTo()</code> methods:</p>
<pre><code class="language-javascript">// tween to a string value
var myBSTween1 = KUTE.to('selector', {boxShadow: '15px 25px #069'}).start();
// or a fromTo with string and array, hex and rgb
@ -293,66 +299,79 @@ var myBSTween2 = KUTE.fromTo('selector', {boxShadow: [15, 25, 0, '#069']}, {boxS
// maybe you want to animate an inset boxShadow?
var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}, {boxShadow: '0px 0px rgb(0,0,0)'}).start();
</code></pre>
<p>You are now ready to demo!</p>
<div id="boxShadow" class="featurettes">
<div class="example-item example-box bg-lime"></div>
<div class="example-buttons">
<a class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<p>This plugin should be compatible with IE9+ and anything that supports <code>boxShadow</code> CSS property. As you can see it can handle pretty much anything you throw at it, but it requires at least 3 values: h-shadow, v-shadow, and color because Safari doesn't work without a color. Also this plugin won't be able to handle multiple instances of <code>boxShadow</code> for same element, because the lack of support on legacy browsers, also the color cannot be RGBA, but hey, it supports both outline and inset shadows and you can fork it anyway to your liking.</p>
<p>If you liked this tutorial, feel free to write your own, a great idea would be for <code>textShadow</code>, it's very similar to the above example plugin.</p>
<h3>Utility Methods</h3>
<ul>
<li><kbd class="bg-lime">KUTE.selector(selector,multi)</kbd> is the selector utility that uses <code>getElementById</code> or <code>querySelector</code> when <code>multi</code> argument is <strong>null</strong> or <strong>false</strong>, BUT when <strong>true</strong>, <code>querySelectorAll</code> is used and returns a HTMLCollection object.</li>
<li><kbd class="bg-lime">KUTE.property(propertyName)</kbd> is the <strong>autoPrefix</strong> function that returns the property with the right vendor prefix, but only if required; on legacy browsers that don't support the property, the function returns <strong>undefinedPropertyName</strong> and that would be an easy way to detect support for that property on most legacy browsers: <pre><code class="language-javascript">if (/undefined/.test(KUTE.property('propertyName')) ) { /* legacy browsers */ } else { /* modern browsers */ }</code></pre></li>
<li><kbd class="bg-lime">KUTE.getPrefix()</kbd> returns a vendor preffix even if the browser supports a specific preffixed property or not.</li>
<li><kbd class="bg-lime">KUTE.getCurrentStyle(element,property)</kbd> a hybrid <code>getComputedStyle</code> function to get the current value of the property required for the <code>.to()</code> method; it actually checks in <code>element.style</code>, <code>element.currentStyle</code> and <code>window.getComputedStyle(element,null)</code> to make sure it won't miss the property value;</li>
<li><kbd class="bg-lime">KUTE.truD(value)</kbd> a function that accepts String and Number and returns a <code>{v: 150, u: 'px'}</code> object for any box model or a single numeric value based property and make it ready to tween. When a second parameter is set to <i>true</i> it will return an object with value and unit specific for rotation angles and skews.</li>
<li><kbd class="bg-lime">KUTE.truC(color)</kbd> a function that returns an <code>{r: 150, g: 150, b: 0}</code> color object ready to tween; if the color value is a <a href="http://www.w3schools.com/colors/colors_names.asp" target="_blank">web safe color</a>, the IE9+ browsers will be able to return the rgb object we need.</li>
<li><kbd class="bg-lime">KUTE.htr(hex)</kbd> a function that accepts HEX formatted colors and returns an <code>{r: 150, g: 150, b: 0}</code> color object;</li>
<li><kbd class="bg-lime">KUTE.rth(r,g,b)</kbd> a function that accepts numeric values for red, blue and green and returns a HEX format <code>#006699</code> color string.</li>
<li><kbd class="bg-lime">Interpolate.number</kbd> is most essential interpolation tool when developing plugins for various properties not supported in the core.</li>
<li><kbd class="bg-lime">Interpolate.unit</kbd> is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like <code>width: 250px</code></li>
<li><kbd class="bg-lime">Interpolate.color</kbd> is a very fast interpolation function for colors, as used in the above example.</li>
<li><kbd class="bg-lime">Interpolate.coords</kbd> is SVG Plugin only, but you can have a look anytime when you're out of ideas.</li>
</ul>
<p>You are now ready to demo!</p>
<div id="boxShadow" class="featurettes">
<div class="example-item example-box bg-lime"></div>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
<div class="example-buttons">
<a class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<p>This plugin should be compatible with IE9+ and anything that supports <code>boxShadow</code> CSS property. As you can see it can handle pretty much anything you throw at it, but it requires at least 3 values: h-shadow, v-shadow, and color
because Safari doesn't work without a color. Also this plugin won't be able to handle multiple instances of <code>boxShadow</code> for same element, because the lack of support on legacy browsers, also the color cannot be RGBA, but hey,
it supports both outline and inset shadows and you can fork it anyway to your liking.</p>
<p>If you liked this tutorial, feel free to write your own, a great idea would be for <code>textShadow</code>, it's very similar to the above example plugin.</p>
</div><!-- /.site-wrapper -->
<h3>Utility Methods</h3>
<ul>
<li><kbd class="bg-lime">KUTE.selector(selector,multi)</kbd> is the selector utility that uses <code>getElementById</code> or <code>querySelector</code> when <code>multi</code> argument is <strong>null</strong> or <strong>false</strong>, BUT
when <strong>true</strong>, <code>querySelectorAll</code> is used and returns a HTMLCollection object.</li>
<li><kbd class="bg-lime">KUTE.property(propertyName)</kbd> is the <strong>autoPrefix</strong> function that returns the property with the right vendor prefix, but only if required; on legacy browsers that don't support the property, the function
returns <strong>undefinedPropertyName</strong> and that would be an easy way to detect support for that property on most legacy browsers: <pre><code class="language-javascript">if (/undefined/.test(KUTE.property('propertyName')) ) { /* legacy browsers */ } else { /* modern browsers */ }</code></pre></li>
<li><kbd class="bg-lime">KUTE.getPrefix()</kbd> returns a vendor preffix even if the browser supports a specific preffixed property or not.</li>
<li><kbd class="bg-lime">KUTE.getCurrentStyle(element,property)</kbd> a hybrid <code>getComputedStyle</code> function to get the current value of the property required for the <code>.to()</code> method; it actually checks in <code>element.style</code>,
<code>element.currentStyle</code> and <code>window.getComputedStyle(element,null)</code> to make sure it won't miss the property value;</li>
<li><kbd class="bg-lime">KUTE.truD(value)</kbd> a function that accepts String and Number and returns a <code>{v: 150, u: 'px'}</code> object for any box model or a single numeric value based property and make it ready to tween. When a second
parameter is set to <i>true</i> it will return an object with value and unit specific for rotation angles and skews.</li>
<li><kbd class="bg-lime">KUTE.truC(color)</kbd> a function that returns an <code>{r: 150, g: 150, b: 0}</code> color object ready to tween; if the color value is a <a href="http://www.w3schools.com/colors/colors_names.asp" target="_blank">web safe color</a>,
the IE9+ browsers will be able to return the rgb object we need.</li>
<li><kbd class="bg-lime">KUTE.htr(hex)</kbd> a function that accepts HEX formatted colors and returns an <code>{r: 150, g: 150, b: 0}</code> color object;</li>
<li><kbd class="bg-lime">KUTE.rth(r,g,b)</kbd> a function that accepts numeric values for red, blue and green and returns a HEX format <code>#006699</code> color string.</li>
<li><kbd class="bg-lime">Interpolate.number</kbd> is most essential interpolation tool when developing plugins for various properties not supported in the core.</li>
<li><kbd class="bg-lime">Interpolate.unit</kbd> is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like <code>width: 250px</code></li>
<li><kbd class="bg-lime">Interpolate.color</kbd> is a very fast interpolation function for colors, as used in the above example.</li>
<li><kbd class="bg-lime">Interpolate.coords</kbd> is SVG Plugin only, but you can have a look anytime when you're out of ideas.</li>
</ul>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
<script src="./assets/js/kute-bs.js"></script> <!-- the boxShadow plugin -->
<script src="./assets/js/extend.js"></script> <!-- examples with boxShadow plugin -->
<script src="./src/kute.min.js"></script>
<!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script>
<!-- some stuff -->
<script src="./assets/js/kute-bs.js"></script>
<!-- the boxShadow plugin -->
<script src="./assets/js/extend.js"></script>
<!-- examples with boxShadow plugin -->
</body>
</html>

376
features.html
View file

@ -1,173 +1,203 @@
<!DOCTYPE html>
<!--[if IE 7]><html class="ie ie7" 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, minimum-scale=1.0">
<meta name="description" content="An in-depth overview with all KUTE.js features, browser compatibility and performance.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,kute.js fetures,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<title>KUTE.js Features | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group active"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li class="active"><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2>Features Overview</h2>
<h3 id="performance">Badass Performance</h3>
<p>KUTE.js was developed with best practices in mind for <strong>fastest code execution</strong> and <strong>memory efficiency</strong>, but performance varies from case to case, as well as for all the other Javascript based animation engines. As a quick note on <a href="about.html#how">how it works</a>, 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.</p>
<p><span class="ion-ios-cog media"></span>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 <a href="https://www.youtube.com/watch?v=1ZWugkJV5Ks" target="_blank">video</a>), code simplicity (lots of CSS for a <a href="https://daneden.github.io/animate.css/" target="_blank">custom animation</a>) and more other.</p>
<p>To learn more about how performance can vary from case to case, check out <a href="about.html#performance">this section</a>, it's very informative.</p>
</div>
<div class="content-wrap">
<h3 id="extensible">Extensible Prototype</h3>
<p>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. </p>
<p>For instance if you want to be able to animate the <code>filter</code> 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.</p>
<p>You may want to head over to the <a href="extend.html">extend</a> page for an indepth guide on how to write your own plugin/extension.</p>
</div>
<div class="content-wrap">
<h3 id="prefix">Auto Browser Prefix</h3>
<p>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: <code>transform</code>, <code>perspective</code>, <code>perspective-origin</code>, <code>border-radius</code> and the <code>requestAnimationFrame</code> Javascript method.</p>
<p><span class="ion-paper-airplane media"></span>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; <strong>less</strong> string concatenation = <strong>more</strong> performance. This asumes you are NOT styling the above CSS3 properties using your stylesheets to avoid glitches with legacy browsers.</p>
<p>This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.</p>
</div>
<div class="content-wrap">
<h3 id="compatibility">Browser Compatibility</h3>
<p>KUTE.js covers all <strong>modern</strong> browsers but also provides fallback options for legacy browsers. The <strong>prefix free</strong> feature mentioned above is one way to enable smooth Javascript based animations on older versions Gecko/Webkit/IE browsers for <code>transform</code> and <code>border-radius</code>. Generally, KUTE.js is built around most used properties, so I highly recommend checking the <a href="http://caniuse.com" target="_blank">can I use</a> website for a very detailed properties support list on many browsers and versions. For instance, some legacy browsers may support <a href="http://caniuse.com/#feat=transforms2d">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d">3D transforms</a> so make sure you know what browsers support and <a href="http://browserhacks.com/" target="_blank">how to target them</a> before you get to work with a complete browser supported animation setup.</p>
<p><span class="ion-android-globe media"></span>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 <a href="https://polyfill.io/" target="_blank">polyfills</a> 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 <code>transition</code>.</p>
<p>Speaking of polyfills, KUTE.js no longer requires <code>window.requestAnimationFrame()</code> for the main thread, but it does require the <code>window.performance.now()</code> for checking the current time, <code>.indexOf()</code> for array/string checks, <code>window.getComputedStyle()</code> for the <code>.to()</code> method and <code>.addEventListener()</code> 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 <a href="https://polyfill.io/"target="_blank">polyfill service</a> some <strong>browser detection will not work</strong> because they fill the gap and your code won't work as expected. For instance this would check for IE8 browser <code>var isIE = document.all && !document.addEventListener;</code> but the polyfill covers <code>.addEventListener()</code> so you will never succeed. This very demo is a great solution for targeting Microsoft's legacy browsers.</p>
<p>As of Safari, we did some tests there too, KUTE.js does it really well.</p>
</div>
<div class="content-wrap">
<h3 id="methods">Methods, Tools and Options</h3>
<h4>Building Tween Objects</h4>
<p>KUTE.js allows you to create tween objects with the help of <code>.to()</code> and <code>.fromTo()</code> methods for a single element, with distinctive functionalities, and the other <code>.allTo()</code> and <code>.allFromTo()</code> that use the first two for collections of elements.</p>
<p><kbd>KUTE.to('selector', toValues, options)</kbd> method is super simple and straightforward and requires a polyfill for <code>window.getComputedStyle()</code> 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 <code>transform</code> properties as they come in chained tweens. However fixing the sync issues is not that hard, see the example at <a href="api.html#start">start()</a> method API.</p>
<p><kbd>KUTE.fromTo('selector', fromValues, toValues, options)</kbd> 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.</p>
<p>It doesn't stack <code>transform</code> 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.</p>
<p><kbd>KUTE.allTo('selector', toValues, options)</kbd> and <kbd>KUTE.allFromTo('selector', fromValues, toValues, options)</kbd> inherit all functionality from the <code>.to()</code> and <code>.fromTo()</code> 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 <a href="api.html">API</a> documentation on all the methods.</p>
<h4>Tween Control</h4>
<p>Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: <code>.start()</code>, <code>.stop()</code>, <code>.pause()</code> and <code>.resume()</code>. These public methods work either when animation is not running, running or is paused. You need to see the <a href="api.html">documentation</a> to learn how these work.</p>
<h4>Tween Options</h4>
<p>Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for <code>transform</code>. For instance 3D rotations require a <code>perspective</code> or a <code>perspective-origin</code>, right? Well, make sure to <a href="options.html">check that out</a>.</p>
<h4>Callback System</h4>
<p>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.</p>
<h4>Addons</h4>
<p>KUTE.js sports some fine tuned addons: jQuery Plugin, <a href="svg.html">SVG Plugin</a>, <a href="text.html">Text Plugin</a>, <a href="attr.html">Attributes Plugin</a>, <a href="css.html">CSS Plugin</a>, cubic bezier easing functions and also physics based easing functions. It also features an extensive guide on <a href="extend.html">how to extend</a>, but I'm open for more features in the future.</p>
<p>Check the <a href="api.html">documentation</a> on these methods and the <a href="examples.html">examples page</a> for more.</p>
</div>
<div class="content-wrap">
<h3>Developer Friendly</h3>
<p><span class="ion-happy media"></span>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms. The terms in short allow you to use the script <strong>for free</strong> in both <strong>personal</strong> and <strong>commercial application</strong> as long as you give <strong>proper credits</strong> to the original author. Also a link back would be appreciated.</p>
<p>Also KUTE.js is <a href="api.html">super documented</a>, all features and options are showcased with detailed <a href="examples.html">examples</a> so you can get your hands really dirty.</p>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div><!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>
<!DOCTYPE html>
<!--[if IE 7]><html class="ie ie7" 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, minimum-scale=1.0">
<meta name="description" content="An in-depth overview with all KUTE.js features, browser compatibility and performance.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,kute.js fetures,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png">
<title>KUTE.js Features | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"></script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group active"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li class="active"><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2>Features Overview</h2>
<h3 id="performance">Badass Performance</h3>
<p>KUTE.js was developed with best practices in mind for <strong>fastest code execution</strong> and <strong>memory efficiency</strong>, but performance varies from case to case, as well as for all the other Javascript based animation engines.
As a quick note on <a href="about.html#how">how it works</a>, 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.</p>
<p><span class="ion-ios-cog media"></span>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 <a href="https://www.youtube.com/watch?v=1ZWugkJV5Ks" target="_blank">video</a>), code simplicity
(lots of CSS for a <a href="https://daneden.github.io/animate.css/" target="_blank">custom animation</a>) and more other.</p>
<p>To learn more about how performance can vary from case to case, check out <a href="about.html#performance">this section</a>, it's very informative.</p>
</div>
<div class="content-wrap">
<h3 id="extensible">Extensible Prototype</h3>
<p>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. </p>
<p>For instance if you want to be able to animate the <code>filter</code> 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.</p>
<p>You may want to head over to the <a href="extend.html">extend</a> page for an indepth guide on how to write your own plugin/extension.</p>
</div>
<div class="content-wrap">
<h3 id="prefix">Auto Browser Prefix</h3>
<p>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: <code>transform</code>, <code>perspective</code>, <code>perspective-origin</code>, <code>border-radius</code> and the <code>requestAnimationFrame</code> Javascript method.</p>
<p><span class="ion-paper-airplane media"></span>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; <strong>less</strong> string concatenation = <strong>more</strong> performance. This asumes you are NOT styling the above CSS3 properties using your stylesheets to avoid glitches with legacy browsers.</p>
<p>This feature is useful mostly for Safari, older Firefox and Opera versions and Internet Explorer 9.</p>
</div>
<div class="content-wrap">
<h3 id="compatibility">Browser Compatibility</h3>
<p>KUTE.js covers all <strong>modern</strong> browsers but also provides fallback options for legacy browsers. The <strong>prefix free</strong> feature mentioned above is one way to enable smooth Javascript based animations on older versions
Gecko/Webkit/IE browsers for <code>transform</code> and <code>border-radius</code>. Generally, KUTE.js is built around most used properties, so I highly recommend checking the <a href="http://caniuse.com" target="_blank">can I use</a> website for a very detailed properties support list on many browsers and versions. For instance, some legacy browsers may support <a href="http://caniuse.com/#feat=transforms2d">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d">3D transforms</a> so make sure you know what browsers support and <a href="http://browserhacks.com/" target="_blank">how to target them</a> before you get to work with a complete browser supported animation setup.</p>
<p><span class="ion-android-globe media"></span>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 <a href="https://polyfill.io/" target="_blank">polyfills</a> 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 <code>transition</code>.</p>
<p>Speaking of polyfills, KUTE.js no longer requires <code>window.requestAnimationFrame()</code> for the main thread, but it does require the <code>window.performance.now()</code> for checking the current time, <code>.indexOf()</code> for array/string
checks, <code>window.getComputedStyle()</code> for the <code>.to()</code> method and <code>.addEventListener()</code> 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 <a href="https://polyfill.io/" target="_blank">polyfill service</a> some <strong>browser detection will not work</strong> because they fill the
gap and your code won't work as expected. For instance this would check for IE8 browser <code>var isIE = document.all && !document.addEventListener;</code> but the polyfill covers <code>.addEventListener()</code> so you will never succeed.
This very demo is a great solution for targeting Microsoft's legacy browsers.</p>
<p>As of Safari, we did some tests there too, KUTE.js does it really well.</p>
</div>
<div class="content-wrap">
<h3 id="methods">Methods, Tools and Options</h3>
<h4>Building Tween Objects</h4>
<p>KUTE.js allows you to create tween objects with the help of <code>.to()</code> and <code>.fromTo()</code> methods for a single element, with distinctive functionalities, and the other <code>.allTo()</code> and <code>.allFromTo()</code> that
use the first two for collections of elements.</p>
<p><kbd>KUTE.to('selector', toValues, options)</kbd> method is super simple and straightforward and requires a polyfill for <code>window.getComputedStyle()</code> 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 <code>transform</code> properties as they come in chained tweens. However fixing the sync issues is not that hard, see the example at <a href="api.html#start">start()</a> method API.</p>
<p><kbd>KUTE.fromTo('selector', fromValues, toValues, options)</kbd> 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.</p>
<p>It doesn't stack <code>transform</code> 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.</p>
<p><kbd>KUTE.allTo('selector', toValues, options)</kbd> and <kbd>KUTE.allFromTo('selector', fromValues, toValues, options)</kbd> inherit all functionality from the <code>.to()</code> and <code>.fromTo()</code> 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 <a href="api.html">API</a> documentation on all the methods.</p>
<h4>Tween Control</h4>
<p>Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: <code>.start()</code>, <code>.stop()</code>, <code>.pause()</code> and <code>.resume()</code>.
These public methods work either when animation is not running, running or is paused. You need to see the <a href="api.html">documentation</a> to learn how these work.</p>
<h4>Tween Options</h4>
<p>Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for <code>transform</code>. For instance 3D rotations require a <code>perspective</code> or a <code>perspective-origin</code>,
right? Well, make sure to <a href="options.html">check that out</a>.</p>
<h4>Callback System</h4>
<p>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.</p>
<h4>Addons</h4>
<p>KUTE.js sports some fine tuned addons: jQuery Plugin, <a href="svg.html">SVG Plugin</a>, <a href="text.html">Text Plugin</a>, <a href="attr.html">Attributes Plugin</a>, <a href="css.html">CSS Plugin</a>, cubic bezier easing functions and also
physics based easing functions. It also features an extensive guide on <a href="extend.html">how to extend</a>, but I'm open for more features in the future.</p>
<p>Check the <a href="api.html">documentation</a> on these methods and the <a href="examples.html">examples page</a> for more.</p>
</div>
<div class="content-wrap">
<h3>Developer Friendly</h3>
<p><span class="ion-happy media"></span>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms. The terms in short allow you to use the script
<strong>for free</strong> in both <strong>personal</strong> and <strong>commercial application</strong> as long as you give <strong>proper credits</strong> to the original author. Also a link back would be appreciated.</p>
<p>Also KUTE.js is <a href="api.html">super documented</a>, all features and options are showcased with detailed <a href="examples.html">examples</a> so you can get your hands really dirty.</p>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script>
<!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script>
<!-- some stuff -->
</body>
</html>

449
index.html
View file

@ -1,218 +1,231 @@
<!DOCTYPE html>
<!--[if IE 7]><html class="ie ie7" 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, minimum-scale=1.0">
<meta name="description" content="KUTE.js is a minimal Javascript animation engine with outstanding performance and supporting 3D transforms, SVG Morph, draw SVG, SVG transform, cross-browser animation, scroll animation, CSS3 properties and many more.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,morph svg,draw svg,svg transform,css3,3d transform,scroll,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png">
<title>KUTE.js | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1 class="active">KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<div class="columns welcome">
<div class="col2 table">
<div class="frontpage">
<h2 class="nomargin"></h2>
<p class="lead"></p>
<p class="btns">
<a class="btn btn-blue" href="https://github.com/thednp/kute.js/archive/master.zip">Download</a>
<a class="btn" href="https://github.com/thednp/kute.js">Github</a>
<a class="btn" href="http://www.jsdelivr.com/#!kute.js">CDN 1</a>
<a class="btn" href="https://cdnjs.com/libraries/kute.js">CDN 2</a>
<a class="btn btn-green replay" href="#">Replay</a>
</p>
</div>
</div>
<div class="col2 table">
<div class="cell">
<div id="blocks" class="columns nomargin">
<div class="col3 bg bg-yellow"></div>
<div class="col3 bg bg-orange"></div>
<div class="col3 bg bg-red"></div>
<div class="col3 bg bg-blue"></div>
<div class="col3 bg bg-olive"></div>
<div class="col3 bg bg-indigo"></div>
<div class="col3 bg bg-lime"></div>
<div class="col3 bg bg-green"></div>
<div class="col3 bg bg-teal"></div>
</div>
</div>
</div>
</div>
</div>
<div class="featurettes dark">
<div class="content-wrap">
<h2 class="nomarginlarge">At A Glance</h2>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>Badass Performance</h3>
<p>KUTE.js is crazy fast with it's <a href="features.html#performance">outstanding performance</a> and super fast code execution, it's also memory efficient. I made a <a href="performance.html">cool demo</a> to showcase how KUTE.js really scales on performance. </p>
</div>
<div class="col2">
<h3>Prefix Free</h3>
<p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> mostly for <code>transform</code>, and even allows you to use the utilities yourself in your apps or your own plugins.</p>
</div>
</div>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>All Browsers Compatible</h3>
<p>KUTE.js covers <a href="features.html#compatibility">all modern browsers</a> with fallback options for legacy browsers. When using <a href="https://polyfill.io/">polyfills</a> and the right <a href="http://browserhacks.com" target="_blank">browser detection</a> you can manage all kinds of <a href="examples.html#crossbrowser">fallback animations</a> for legacy browsers.</p>
</div>
<div class="col2">
<h3>Powerful Methods</h3>
<p>KUTE.js allows you to <a href="features.html#methods">create tweens</a> and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum <a href="options.html">tween options</a>.</p>
</div>
</div>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>Packed With Tools</h3>
<p>KUTE.js comes with a <a href="css.html" title="The CSS Plugin provides support for border radius, additional color and box model properties, as well as for clip and backgroun-position.">CSS Plugin</a>, a <a href="svg.html" title="The SVG Plugin allows you to morph and draw SVG, as well as animate other SVG related CSS properties.">SVG Plugin</a>, an <a href="attr.html" title="The Attributes Plugin allows you to animate any numeric presentation attribute.">ATTR Plugin</a>, a <a href="text.html">Text Plugin</a> and a jQuery plugin, <a href="easing.html">easing functions</a>, color convertors, utility functions, and you can even <a href="features.html#extensible">extend</a> it yourself.</p>
</div>
<div class="col2">
<h3>Plenty Of Properties</h3>
<p>KUTE.js covers <a href="properties.html">all animation needs</a> such as SVG morph &amp; transform and other specific CSS properties, then CSS3 <code>transform</code>, <code>scroll</code>, <code>border-radius</code>, and almost the full box model or text properties.</p>
</div>
</div>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>MIT License</h3>
<p>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms.</p>
</div>
<div class="col2">
<h3>Top Notch Documentation</h3>
<p>All examples, code, tips &amp; tricks are very well documented.</p>
</div>
</div>
</div>
</div>
<div class="content-wrap">
<h2>Getting Started</h2>
<div class="columns hiddenoverflow">
<div class="col3">
<span class="ion-ios-game-controller-b media"></span>
<h3>Examples</h3>
<p>See <a href="examples.html">KUTE.js in action</a> with all it's functions, options and features.</p>
</div>
<div class="col3">
<span class="ion-ios-paper media"></span>
<h3>Documentation</h3>
<p>The <a href="start.html">API documentation</a> is here for you to get you started.</p>
</div>
<div class="col3">
<span class="ion-ios-pulse-strong media"></span>
<h3>Performance</h3>
<p class="marginbottom">Head over to the <a href="performance.html">performance</a> test page right away.</p>
</div>
</div>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div><!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.min.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./src/kute-text.min.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
<script src="./assets/js/home.js"></script> <!-- some stuff -->
</body>
</html>
<!DOCTYPE html>
<!--[if IE 7]><html class="ie ie7" 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, minimum-scale=1.0">
<meta name="description" content="KUTE.js is a minimal Javascript animation engine with outstanding performance and supporting 3D transforms, SVG Morph, draw SVG, SVG transform, cross-browser animation, scroll animation, CSS3 properties and many more.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,morph svg,draw svg,svg transform,css3,3d transform,scroll,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png">
<title>KUTE.js | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1 class="active">KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<div class="columns welcome">
<div class="col2 table">
<div class="frontpage">
<h2 class="nomargin"></h2>
<p class="lead"></p>
<p class="btns">
<a class="btn btn-blue" href="https://github.com/thednp/kute.js/archive/master.zip">Download</a>
<a class="btn" href="https://github.com/thednp/kute.js">Github</a>
<a class="btn" href="http://www.jsdelivr.com/#!kute.js">CDN 1</a>
<a class="btn" href="https://cdnjs.com/libraries/kute.js">CDN 2</a>
<a class="btn btn-green replay" href="#">Replay</a>
</p>
</div>
</div>
<div class="col2 table">
<div class="cell">
<div id="blocks" class="columns nomargin">
<div class="col3 bg bg-yellow"></div>
<div class="col3 bg bg-orange"></div>
<div class="col3 bg bg-red"></div>
<div class="col3 bg bg-blue"></div>
<div class="col3 bg bg-olive"></div>
<div class="col3 bg bg-indigo"></div>
<div class="col3 bg bg-lime"></div>
<div class="col3 bg bg-green"></div>
<div class="col3 bg bg-teal"></div>
</div>
</div>
</div>
</div>
</div>
<div class="featurettes dark">
<div class="content-wrap">
<h2 class="nomarginlarge">At A Glance</h2>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>Badass Performance</h3>
<p>KUTE.js is crazy fast with it's <a href="features.html#performance">outstanding performance</a> and super fast code execution, it's also memory efficient. I made a <a href="performance.html">cool demo</a> to showcase how KUTE.js
really scales on performance. </p>
</div>
<div class="col2">
<h3>Prefix Free</h3>
<p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> mostly for <code>transform</code>, and even allows you to use the utilities yourself in your apps or your own plugins.</p>
</div>
</div>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>All Browsers Compatible</h3>
<p>KUTE.js covers <a href="features.html#compatibility">all modern browsers</a> with fallback options for legacy browsers. When using <a href="https://polyfill.io/">polyfills</a> and the right <a href="http://browserhacks.com" target="_blank">browser detection</a> you can manage all kinds of <a href="examples.html#crossbrowser">fallback animations</a> for legacy browsers.</p>
</div>
<div class="col2">
<h3>Powerful Methods</h3>
<p>KUTE.js allows you to <a href="features.html#methods">create tweens</a> and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum <a href="options.html">tween options</a>.</p>
</div>
</div>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>Packed With Tools</h3>
<p>KUTE.js comes with a <a href="css.html" title="The CSS Plugin provides support for border radius, additional color and box model properties, as well as for clip and backgroun-position.">CSS Plugin</a>, a <a href="svg.html" title="The SVG Plugin allows you to morph and draw SVG, as well as animate other SVG related CSS properties.">SVG Plugin</a>,
an <a href="attr.html" title="The Attributes Plugin allows you to animate any numeric presentation attribute.">ATTR Plugin</a>, a <a href="text.html">Text Plugin</a> and a jQuery plugin, <a href="easing.html">easing functions</a>,
color convertors, utility functions, and you can even <a href="features.html#extensible">extend</a> it yourself.</p>
</div>
<div class="col2">
<h3>Plenty Of Properties</h3>
<p>KUTE.js covers <a href="properties.html">all animation needs</a> such as SVG morph &amp; transform and other specific CSS properties, then CSS3 <code>transform</code>, <code>scroll</code>, <code>border-radius</code>, and almost
the full box model or text properties.</p>
</div>
</div>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>MIT License</h3>
<p>You can develop with KUTE.js for free thanks to the <a href="https://github.com/thednp/kute.js/blob/master/LICENSE" target="_blank">MIT License</a> terms.</p>
</div>
<div class="col2">
<h3>Top Notch Documentation</h3>
<p>All examples, code, tips &amp; tricks are very well documented.</p>
</div>
</div>
</div>
</div>
<div class="content-wrap">
<h2>Getting Started</h2>
<div class="columns hiddenoverflow">
<div class="col3">
<span class="ion-ios-game-controller-b media"></span>
<h3>Examples</h3>
<p>See <a href="examples.html">KUTE.js in action</a> with all it's functions, options and features.</p>
</div>
<div class="col3">
<span class="ion-ios-paper media"></span>
<h3>Documentation</h3>
<p>The <a href="start.html">API documentation</a> is here for you to get you started.</p>
</div>
<div class="col3">
<span class="ion-ios-pulse-strong media"></span>
<h3>Performance</h3>
<p class="marginbottom">Head over to the <a href="performance.html">performance</a> test page right away.</p>
</div>
</div>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script>
<!-- KUTE.js core -->
<script src="./src/kute-css.min.js"></script>
<!-- KUTE.js CSS Plugin -->
<script src="./src/kute-text.min.js"></script>
<!-- KUTE.js CSS Plugin -->
<script src="./assets/js/scripts.js"></script>
<!-- some stuff -->
<script src="./assets/js/home.js"></script>
<!-- some stuff -->
</body>
</html>

296
options.html
View file

@ -3,7 +3,9 @@
<!--[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]-->
<!--[if !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
@ -12,138 +14,148 @@
<meta name="description" content="KUTE.js tween options refference on most common options as well as property or plugin specific.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,kute.js tween options,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- TO DO -->
<title>KUTE.js Tween Options | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li class="active"><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li class="active"><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="content-wrap">
<h2 id="tweenoptions">Tween Options</h2>
<p>Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can override these default values, as we'll see later on this page.</p>
<div class="content-wrap">
<h2 id="tweenoptions">Tween Options</h2>
<p>Any animation can be customized in many ways for duration, progress / easing, delay and even for specific plugins. Some of these options have a default value and starting with KUTE.js version 1.6.1 you can override these default values, as
we'll see later on this page.</p>
<h3>Common Options</h3>
<p>These options affect all types of tweens, no matter the properties used or context.</p>
<ul>
<li><kbd>duration: 500</kbd> option allows you to set the animation duration in miliseconds. The default value is <strong>700</strong>.</li>
<li><kbd>repeat: 20</kbd> option allows you to run the animation of given tween multiple times. The default value is <strong>0</strong>.</li>
<li><kbd>delay: 500</kbd> option allows you to delay the tween animation for a certain number of miliseconds. The default value is <strong>0</strong>.</li>
<li><kbd>offset: 200</kbd> option is only for <code>.allTo()</code> and <code>.allFromTo()</code> 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 <strong>0</strong>.</li>
<li><kbd>repeatDelay: 500</kbd> option allows you to set a number of miliseconds delay between repeatable animations. If <code>repeat</code> option is set to <strong>0</strong>, will produce no effect. The default value is <strong>0</strong>.</li>
<li><kbd>yoyo: true/false</kbd> option makes use of the internal reverse functionality to also animate from <b>end</b> to <b>start</b> for a given tween. This option requires that you use the <code>repeat</code> option with at least value <b>1</b>. The default value is <strong>false</strong>.</li>
<li><kbd>easing: 'easingCubicInOut'</kbd> 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 <strong>linear</strong>.</li>
</ul>
<h3>Common Options</h3>
<p>These options affect all types of tweens, no matter the properties used or context.</p>
<ul>
<li><kbd>duration: 500</kbd> option allows you to set the animation duration in miliseconds. The default value is <strong>700</strong>.</li>
<li><kbd>repeat: 20</kbd> option allows you to run the animation of given tween multiple times. The default value is <strong>0</strong>.</li>
<li><kbd>delay: 500</kbd> option allows you to delay the tween animation for a certain number of miliseconds. The default value is <strong>0</strong>.</li>
<li><kbd>offset: 200</kbd> option is only for <code>.allTo()</code> and <code>.allFromTo()</code> 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 <strong>0</strong>.</li>
<li><kbd>repeatDelay: 500</kbd> option allows you to set a number of miliseconds delay between repeatable animations. If <code>repeat</code> option is set to <strong>0</strong>, will produce no effect. The default value is <strong>0</strong>.</li>
<li><kbd>yoyo: true/false</kbd> option makes use of the internal reverse functionality to also animate from <b>end</b> to <b>start</b> for a given tween. This option requires that you use the <code>repeat</code> option with at least value
<b>1</b>. The default value is <strong>false</strong>.</li>
<li><kbd>easing: 'easingCubicInOut'</kbd> 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 <strong>linear</strong>.</li>
</ul>
<h3>Transform Options</h3>
<p>These options only affect animation involving any 3D property from CSS3 <code>transform</code> and have no effect on other CSS properties. While you can set <code>perspective</code> or <code>perspective origin</code> via CSS, these options are here to help, especially with full browser support and preffix free handling.</p>
<ul>
<li><kbd>perspective: 500</kbd> option allows you to set a 3D transformation <code>perspective</code> for a given HTML element. No default value.</li>
<li><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML element. This option has no default value and only accepts valid CSS values according to it's specs.</li>
<li><kbd>parentPerspective: 500</kbd> option allows you to set a 3D <code>perspective</code> for the <strong>parent</strong> of the HTML element subject to the transform animation. No default value.</li>
<li><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> 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 and has no default value.</li>
<li><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a <kbd class="bg-olive">svgTransform</kbd> property, it can also accept array values: <code>transformOrigin: [250,250]</code>. There is no default value but the SVG Plugin will always use <code>50% 50%</code> for your transform tweens.</li>
</ul>
<h3>Transform Options</h3>
<p>These options only affect animation involving any 3D property from CSS3 <code>transform</code> and have no effect on other CSS properties. While you can set <code>perspective</code> or <code>perspective origin</code> via CSS, these options
are here to help, especially with full browser support and preffix free handling.</p>
<ul>
<li><kbd>perspective: 500</kbd> option allows you to set a 3D transformation <code>perspective</code> for a given HTML element. No default value.</li>
<li><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML element. This option has no default value and only accepts valid CSS values according to it's specs.</li>
<li><kbd>parentPerspective: 500</kbd> option allows you to set a 3D <code>perspective</code> for the <strong>parent</strong> of the HTML element subject to the transform animation. No default value.</li>
<li><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> 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 and has no default value.</li>
<li><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML/SVG element subject for the transform animation. Starting KUTE.js 1.6.0 this option also aplies to SVG transforms featured with
the SVG Plugin. This options only accepts valid CSS values for CSS3 transforms, but keep in mind that for both CSS3 transform and SVG transform attribute KUTE.js will always think of "50% 50%" as the default value, even if most browser's
default value for SVG transform origin is "0px 0px 0px" and the reason is simply consistency all round. When applied to a <kbd class="bg-olive">svgTransform</kbd> property, it can also accept array values: <code>transformOrigin: [250,250]</code>.
There is no default value but the SVG Plugin will always use <code>50% 50%</code> for your transform tweens.</li>
</ul>
<h3>SVG Plugin Options</h3>
<p>The following options only affect animation of the <code>path</code> tween property, to customize the SVG morph animation. See <a href="svg.html">SVG Plugin</a> page.</p>
<ul>
<li><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.</li>
<li><kbd>morphIndex: Number</kbd> 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".</li>
<li><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape.</li>
<li><kbd>reverseSecondPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the SECOND shape.</li>
</ul>
<h3>SVG Plugin Options</h3>
<p>The following options only affect animation of the <code>path</code> tween property, to customize the SVG morph animation. See <a href="svg.html">SVG Plugin</a> page.</p>
<ul>
<li><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.</li>
<li><kbd>morphIndex: Number</kbd> 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".</li>
<li><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape.</li>
<li><kbd>reverseSecondPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the SECOND shape.</li>
</ul>
<h3>Text Plugin Options</h3>
<p>The only option for the plugin is the <kbd>textChars</kbd> option for the <kbd class="bg-olive">text</kbd> property and allows you to set the characters set for the scrambling character during the animation. See <a href="text.html">Text Plugin</a> page for more instructions and demo.</p>
<h3>Callback Options</h3>
<p>These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.</p>
<ul>
<li><kbd>start: function</kbd> option allows you to set a function to run once tween animation starts.</li>
<li><kbd>update: function</kbd> option allows you to set a function to run on every frame.</li>
<li><kbd>pause: function</kbd> option allows you to set a function to run when animation is paused.</li>
<li><kbd>resume: function</kbd> option allows you to set a function to run when animation is resumed.</li>
<li><kbd>stop: function</kbd> option allows you to set a function to run when animation is stopped.</li>
<li><kbd>complete: function</kbd> option allows you to set a function to run when animation is finished.</li>
</ul>
<p>A quick example would look like this:</p>
<pre><code class="language-javascript">//define a function
<h3>Text Plugin Options</h3>
<p>The only option for the plugin is the <kbd>textChars</kbd> option for the <kbd class="bg-olive">text</kbd> property and allows you to set the characters set for the scrambling character during the animation. See <a href="text.html">Text Plugin</a> page for more instructions and demo.</p>
<h3>Callback Options</h3>
<p>These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.</p>
<ul>
<li><kbd>start: function</kbd> option allows you to set a function to run once tween animation starts.</li>
<li><kbd>update: function</kbd> option allows you to set a function to run on every frame.</li>
<li><kbd>pause: function</kbd> option allows you to set a function to run when animation is paused.</li>
<li><kbd>resume: function</kbd> option allows you to set a function to run when animation is resumed.</li>
<li><kbd>stop: function</kbd> option allows you to set a function to run when animation is stopped.</li>
<li><kbd>complete: function</kbd> option allows you to set a function to run when animation is finished.</li>
</ul>
<p>A quick example would look like this:</p>
<pre><code class="language-javascript">//define a function
var callback = function(){
//do some foo
//do some foo
}
//create object and start animating already
KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
</code></pre>
<h3>Other Options</h3>
<p><kbd>keepHex: true</kbd> option allows you to always use <code>HEX</code> color format, even if you have used <code>RGB</code> or <code>RGBA</code>. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.</p>
</code></pre>
<h3>Other Options</h3>
<p><kbd>keepHex: true</kbd> option allows you to always use <code>HEX</code> color format, even if you have used <code>RGB</code> or <code>RGBA</code>. This option is useful when tweening color properties on legacy browsers, however modern browsers
may ignore this option for performance reasons.</p>
<h3>Override Default Options' Values</h3>
<p>Most options have a default value as you can see above, they are globally defined in the <code>KUTE.defaultOptions</code> object like so:</p>
<pre><code class="language-javascript">// the list of all tween options that can be overrided
<h3>Override Default Options' Values</h3>
<p>Most options have a default value as you can see above, they are globally defined in the <code>KUTE.defaultOptions</code> object like so:</p>
<pre><code class="language-javascript">// the list of all tween options that can be overrided
KUTE.defaultOptions = {
duration: 700,
delay: 0,
@ -158,47 +170,51 @@ KUTE.defaultOptions = {
};
</code></pre>
<p>As some <a href="https://github.com/thednp/kute.js/issues/47">user suggested</a>, he would need a way to override the default duration value, here's how to:</p>
<pre><code class="language-javascript">// sets the new global duration tween option default value
<p>As some <a href="https://github.com/thednp/kute.js/issues/47">user suggested</a>, he would need a way to override the default duration value, here's how to:</p>
<pre><code class="language-javascript">// sets the new global duration tween option default value
KUTE.defaultOptions.duration = 1000;
</code></pre>
<p>Also make sure to define the new option global default values <b>before</b> you define your tween objects.</p>
</div>
</code></pre>
<p>Also make sure to define the new option global default values <b>before</b> you define your tween objects.</p>
</div>
<div class="content-wrap">
<div class="content-wrap">
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div><!-- /.site-wrapper -->
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
<script src="./src/kute.min.js"></script>
<!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script>
<!-- some stuff -->
</body>
</html>

188
performance.html
View file

@ -8,125 +8,173 @@
<meta name="description" content="KUTE.js performance testing page, in comparison with GSAP and Tween.js">
<meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- TO DO -->
<title>KUTE.js | Performance Testing Page</title>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<style>
body {background-color: #2e2e2e; color: #999; font-size: 12px; font-family: Helvetica, Arial, Helvetica, sans-serif;}
a {color:#ffd626; text-decoration: none}
a:hover,a:focus {color:#fff;}
body {
background-color: #2e2e2e;
color: #999;
font-size: 12px;
font-family: Helvetica, Arial, Helvetica, sans-serif;
}
a {
color: #ffd626;
text-decoration: none
}
a:hover,
a:focus {
color: #fff;
}
#container {
width: 200px; /*height: 200px;*/
width: 200px;
/*height: 200px;*/
margin: 0 auto;
position: relative;
display: block;
}
iframe {width: 100%; height: 100%; border:0}
iframe {
width: 100%;
height: 100%;
border: 0
}
.line {
width: 200px;
height: 2px;
position: absolute;
}
.box { height: 200px }
#info {position: absolute; top: 0; left: 0; width: 350px;}
.padding {padding: 20px}
.btn-group { margin-bottom: 15px; }
.btn {font-size: 13px; }
.text-note {color: #069}
.text-danger {font-weight: bold}
.box {
height: 200px
}
#info {
position: absolute;
top: 0;
left: 0;
width: 350px;
}
.padding {
padding: 20px
}
.btn-group {
margin-bottom: 15px;
}
.btn {
font-size: 13px;
}
.text-note {
color: #069
}
.text-danger {
font-weight: bold
}
</style>
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<script src="./assets/js/minifill.js">
</script>
</head>
<body>
<div id="info" class="padding">
<p><a class="back" href="index.html">Back to KUTE.js</a></p>
<p>Engine </p>
<div id="info" class="padding">
<p><a class="back" href="index.html">Back to KUTE.js</a></p>
<p>Engine </p>
<span id="engine" class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu" role="menu">
<li><a id="kute" href="#">KUTE</a></li>
<li><a id="gsap" href="#">GSAP</a></li>
<li><a id="tween" href="#">Tween.js</a></li>
</ul>
</ul>
</span>
<p>Property </p>
<p>Property </p>
<span id="property" class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu" role="menu">
<li><a id="left" href="#">left</a></li>
<li><a id="translateX" href="#">translateX</a></li>
</ul>
</ul>
</span>
<p>Repeat </p>
<p>Repeat </p>
<span id="repeat" class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<ul class="dropdown-menu" role="menu">
<li><a id="5" href="#">5</a></li>
<li><a id="10" href="#">10</a></li>
<li><a id="15" href="#">15</a></li>
<li><a id="20" href="#">20</a></li>
</ul>
</ul>
</span>
<p>How many elements to animate:</p>
<p>How many elements to animate:</p>
<span id="count" class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false" tabindex="0">Select <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu">
<li><a id="100" href="#">100</a></li>
<li><a id="200" href="#">200</a></li>
<li><a id="300" href="#">300</a></li>
<li><a id="400" href="#">400</a></li>
<li><a id="500" href="#">500</a></li>
<li><a id="600" href="#">600</a></li>
<li><a id="700" href="#">700</a></li>
<li><a id="800" href="#">800</a></li>
<li><a id="900" href="#">900</a></li>
<li><a id="1000" href="#"><span style="color: red">1000</span></a></li>
<li><a id="1500" href="#"><span style="color: red">1500</span></a></li>
<li><a id="2000" href="#"><span style="color: red">2000</span></a></li>
</ul>
<ul class="dropdown-menu" role="menu">
<li><a id="100" href="#">100</a></li>
<li><a id="200" href="#">200</a></li>
<li><a id="300" href="#">300</a></li>
<li><a id="400" href="#">400</a></li>
<li><a id="500" href="#">500</a></li>
<li><a id="600" href="#">600</a></li>
<li><a id="700" href="#">700</a></li>
<li><a id="800" href="#">800</a></li>
<li><a id="900" href="#">900</a></li>
<li><a id="1000" href="#"><span style="color: red">1000</span></a></li>
<li><a id="1500" href="#"><span style="color: red">1500</span></a></li>
<li><a id="2000" href="#"><span style="color: red">2000</span></a></li>
</ul>
</span>
<hr>
<div style="width:100%;clear: both">
<button class="btn btn-success" id="start" type="button" style="margin-bottom: 15px">Start</button>
<button class="btn btn-success" id="start" type="button" style="margin-bottom: 15px">Start</button>
</div>
<!--[if IE]><p class="text-danger">The test page is not intended for Internet Explorer or legacy browsers.</p><![endif]-->
<!--[if !IE ]><!-->
<p>These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, <a href="https://developer.chrome.com/devtools/docs/rendering-settings" target="_blank">here's how</a>.</p>
<p class="text-note">Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.</p>
<!--<![endif]-->
</div>
<!--[if IE]><p class="text-danger">The test page is not intended for Internet Explorer or legacy browsers.</p><![endif]-->
<!--[if !IE ]><!-->
<p>These tests are only for modern browsers. In Webkit browsers like Google Chrome and Opera you can enable the FPS metter in developer tools, <a href="https://developer.chrome.com/devtools/docs/rendering-settings" target="_blank">here's how</a>.</p>
<p class="text-note">Please know that a local copy of this page will outperform the live site demo on Google Chrome, the reason is unknown.</p>
<!--<![endif]-->
<div id="container"></div>
</div>
<div id="container"></div>
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<!--[if !IE ]><!-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<!--[if !IE ]><!-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/1.0.1/bootstrap-native.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="./assets/js/tween.min.js"></script>
<script src="./src/kute.min.js"></script>
<!--<script src="./../kute.js"></script>-->
<script src="./assets/js/perf.js"></script>
<!--<![endif]-->
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
<script src="./assets/js/tween.min.js"></script>
<script src="./src/kute.min.js"></script>
<!--<script src="./../kute.js"></script>-->
<script src="./assets/js/perf.js"></script>
<!--<![endif]-->
</body>
</html>

452
properties.html
View file

@ -3,7 +3,9 @@
<!--[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]-->
<!--[if !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
@ -12,227 +14,271 @@
<meta name="description" content="The complete list of supported CSS properties, presentation attributes and other DOM animations for KUTE.js.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,css properties,css3 animation,kute.js supported properties,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- TO DO -->
<title>KUTE.js Supported Properties | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group active"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li class="active"><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group active"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li class="active"><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</div>
</div>
<div class="content-wrap">
<h2>Supported Properties</h2>
<p>KUTE.js covers all animation needs by itself for <code>transform</code> properties, <code>scroll</code> for window or a given element, colors. Note: not all browsers support <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a>. With the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like <code>border-radius</code>,
<code>clip</code>, <code>backgroundPosition</code> and more box model properties.</p>
<p>Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular coding, KUTE.js makes it easy to add support for additional
properties, so check out the guide on <a href="extend.html">how to extend</a>.</p>
<p>All common measurement units are supported: <code>px</code> and <code>%</code> for translations and box-model properties, or <code>deg</code> and <code>rad</code> for rotations and skews, while <code>clip</code> only supports <code>px</code>.
Other properties such as <code>opacity</code>, <code>scale</code> or <code>scroll</code> are unitless, and <code>background-position</code> always uses <code>%</code> as measurement unit. As for the text properties you can use <code>px</code>,
<code>em</code>, <code>rem</code>, <code>vh</code> and <code>vw</code>. Be sure to <a href="http://caniuse.com/#feat=viewport-units" target="_blank">check</a> what your browsers support in terms of measurement unit.</p>
<h3>Opacity</h3>
<p>In most cases, the best animation possible is the <code class="bg-blue">opacity</code>, 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 <code>filter: alpha(opacity=0)</code>. Also, opacity can be used for instance on legacy browsers that don't support <code>RGBA</code> colors. Eg. <code>opacity:0.5</code> will make an element semitransparent.</p>
<h3>2D Transform Properties</h3>
<p>The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage based translation to pixels and radians based angles
to degrees, to help improve memory efficiency.</p>
<ul>
<li><kbd class="bg-blue">translate</kbd> property can be used for horizontal and / or vertical movement. EG. <code>translate:150</code> to translate an element 150px to the right or <code>translate:[-150,200]</code> to move the element to
the left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">rotate</kbd> property applies rotation to an element on the Z axis or the plain document. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">skewX</kbd> property applies a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew an element by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">skewY</kbd> property applies a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew an element by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">scale</kbd> property applies a single value size transformation. Eg. <code>scale:2</code> will enlarge an element by a degree of 2. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-red">matrix</kbd>, double axis <kbd class="bg-red">skew</kbd> and double axis <kbd class="bg-red">scale</kbd> properties are not supported.</li>
</ul>
<h3>3D Transform Properties</h3>
<p>The core engine supports all 3D transform properties except <code>matrix3d</code> and <code>rotate3d</code>. Just as the above, these properties' values are also converted to traditional pixels and degrees measurements to help improve memory
usage.</p>
<ul>
<li><kbd class="bg-blue">translateX</kbd> property is for horizontal translation. EG. <code>translateX:150</code> to translate an element 150px to the right. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translateY</kbd> property is for vertical translation. EG. <code>translateY:-250</code> to translate an element 250px towards the top. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translateZ</kbd> property is for translation on the Z axis in a given 3D field. EG. <code>translateZ:-250</code> to translate an element 250px to it's back, making it smaller. Requires a <code>perspective</code> tween
option to be used; the smaller perspective value, the deeper translation. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translate3d</kbd> property is for movement on all the axis in a given 3D field. EG. <code>translate3d:[-150,200,150]</code> to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer,
making it larger. Also requires using a <code>perspective</code> tween option. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateX</kbd> property rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees. Requires perspective. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateY</kbd> property rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees. Requires perspective. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateZ</kbd> property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:-150</code> will rotate an element counter-clockwise by 150 degrees. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-red">matrix3d</kbd>, <kbd class="bg-red">rotate3d</kbd>, and <kbd class="bg-red">scale3d</kbd> properties are not supported.</li>
</ul>
<h3>SVG Transform</h3>
<p>The <a href="svg.html">SVG Plugin</a> features cross browser 2D transform animations via the <kbd class="bg-olive">svgTransform</kbd> tween property and the <code>transform</code> presentation attribute, similar in functionality as the Attributes
Plugin.</p>
<ul>
<li><kbd class="bg-olive">translate</kbd> sub-property applies horizontal and / or vertical translation. EG. <code>translate:150</code> to translate a shape 150px to the right or <code>translate:[-150,200]</code> to move the element to the
left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">rotate</kbd> sub-property applies rotation to a shape on the Z axis. Eg. <code>rotate:150</code> will rotate a shape clockwise by 150 degrees around it's own center or around the <code>transformOrigin: '450 450'</code> set tween option coordinate of the parent element. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">skewX</kbd> sub-property used to apply a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew a shape by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">skewY</kbd> sub-property used to apply a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew a shape by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">scale</kbd> sub-property used to apply a single value size transformation. Eg. <code>scale:0.5</code> will scale a shape to half of it's initial size. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-red">matrix</kbd> sub-property is not supported.</li>
</ul>
<p>As a quick note, the translation is normalized and computed in a way to handle the <code>transformOrigin</code> tween option in all cases, not just for rotations, but also scaling or skews.</p>
<h3>SVG Properties</h3>
<p>The <a href="svg.html">SVG Plugin</a> can animate the <code>d</code> attribute of a given <code>&lt;path&gt;</code> or <code>&lt;glyph&gt;</code> element with the tween property called <kbd class="bg-olive">path</kbd>. The animation effect
is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to <a href="http://bl.ocks.org/mbostock/3081153" target="_blank">the D3.js examples</a> for wider usability and the ability to
optimize the visual and performance of the morph, all with the help of special tween options and utilities.</p>
<p>Further more, the SVG Plugin can animate the stroke in a way that you probably know as <code>drawSVG</code>. KUTE.js implements it as <kbd class="bg-olive">draw</kbd> tween property that deals with the well known CSS properties: <kbd>strokeDasharray</kbd> and <kbd>strokeDashoffset</kbd>.
<h3>Box Model Properties</h3>
<p>The core engine supports <code>width</code>, <code>height</code>, <code>left</code> and <code>top</code> while the <a href="css.html">CSS Plugin</a> adds support for all other box-model properties.</p>
<ul>
<li><kbd class="bg-blue">left</kbd>, <kbd class="bg-blue">top</kbd>, <kbd class="bg-olive">right</kbd> and <kbd class="bg-olive">bottom</kbd> are <code>position</code> based properties for movement on vertical and / or horizontal axis.
These properties require that the element to animate uses <code>position: absolute/relative</code> styling as well as it's parent element requires <code>position:relative</code>. These properties can be used as fallback for browsers
with no support for <code>translate</code> properties such as IE8.</li>
<li><kbd class="bg-blue">width</kbd>, <kbd class="bg-blue">height</kbd>, <kbd class="bg-olive">minWidth</kbd>, <kbd class="bg-olive">minHeight</kbd>, <kbd class="bg-olive">maxWidth</kbd>, <kbd class="bg-olive">maxHeight</kbd> are properties
that allow you to animate the size of an element on horizontal and / or vertical axis. These properties can be used on images as fallback for <code>scale</code> on IE8 again, as well as for other purposes.</li>
<li><kbd class="bg-olive">padding</kbd>, <kbd class="bg-olive">margin</kbd>, <kbd class="bg-olive">paddingTop</kbd>, <kbd class="bg-olive">paddingBottom</kbd>, <kbd class="bg-olive">paddingLeft</kbd>, <kbd class="bg-olive">paddingRight</kbd>,
<kbd class="bg-olive">marginTop</kbd>, <kbd class="bg-olive">marginBottom</kbd>, <kbd class="bg-olive">marginLeft</kbd> and <kbd class="bg-olive">marginRight</kbd> are properties that allow you to animate the spacing of an element
inside (via padding) and outside (via margin). Shorthand notations such as <code>margin: "20px 50px"</code> or any other type are not supported.</li>
<li><kbd class="bg-olive">borderWidth</kbd>, <kbd class="bg-olive">borderTopWidth</kbd>, <kbd class="bg-olive">borderRightWidth</kbd>, <kbd class="bg-olive">borderBottomWidth</kbd> are <kbd class="bg-olive">borderLeftWidth</kbd> are properties
that allow you to animate the border of an element either on all sides at once or each side separatelly. Shorthand notations are not supported.</li>
<li><kbd class="bg-olive">outlineWidth</kbd> property allows you to animate the <code>outline-width</code> of an element.</li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
<p>As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the <code>element.offsetWidth</code> as a refference. The idea is
the same as presented on the above supported transform properties.</p>
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong> that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger <code>resize</code> event
that may cause crashes on old browsers such as IE8 when using handlers bound on <code>resize</code>, so use with caution.</p>
<h3>Border Radius</h3>
<p>The <a href="css.html">CSS Plugin</a> covers all the radius properties with the exception that shorthand notations are not implemented.</p>
<ul>
<li><kbd class="bg-olive">borderRadius</kbd> allows you to animate the <code>border-radius</code> on all corners for a given element.</li>
<li><kbd class="bg-olive">borderTopLeftRadius</kbd> allows you to animate the <code>border-top-left-radius</code> for a given element.</li>
<li><kbd class="bg-olive">borderTopRightRadius</kbd> allows you to animate the <code>border-top-right-radius</code> for a given element.</li>
<li><kbd class="bg-olive">borderBottomLeftRadius</kbd> allows you to animate the <code>border-bottom-left-radius</code>for a given element.</li>
<li><kbd class="bg-olive">borderBottomRightRadius</kbd> allows you to animate the <code>border-bottom-right-radius</code>for a given element.</li>
</ul>
<p>For all radius properties above <code>borderRadius:20</code> or <code>borderTopLeftRadius:'25%'</code> will do. In the first case <code>px</code> is the default measurement unit used, while in the second we require using <code>%</code> unit which is relative to the element's size.</p>
<p><strong>Remember</strong>: shorthands for <code>border-radius</code> are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. <code>-moz-border-radius-topleft</code>) as they were deprecated with later
versions.</p>
<h3>Color Properties</h3>
<p>The core engine only supports <code>color</code> and <code>backgroundColor</code>, but the <a href="css.html">CSS Plugin</a> covers all the others. KUTE.js currently supports values such as <code>HEX</code>, <code>RGB</code> and <code>RGBA</code> for all color properties, but IE8 does not support <code>RGBA</code> and always uses <code>RGB</code> when detected, otherwise will produce no effect. There is also a tween option <code>keepHex:true</code> to convert the color format.
Eg. <code>color: '#ff0000'</code> or <code>backgroundColor: 'rgb(202,150,20)'</code> or <code>borderColor: 'rgba(250,100,20,0.5)'</code>. The IE9+ browsers should also work with
<a href="http://www.w3schools.com/colors/colors_names.asp"
target="_blank">web safe colors</a>, eg. <code>color: 'red'</code>. </p>
<ul>
<li><kbd class="bg-blue">color</kbd> allows you to animate the color for a given text element.</li>
<li><kbd class="bg-blue">backgroundColor</kbd> allows you to animate the <code>background-color</code> for a given element.</li>
<li><kbd class="bg-olive">outlineColor</kbd> allows you to animate the <code>outline-color</code> for a given element.</li>
<li><kbd class="bg-olive">borderColor</kbd> allows you to animate the <code>border-color</code> on all sides for a given element.</li>
<li><kbd class="bg-olive">borderTopColor</kbd>, <kbd class="bg-olive">borderRightColor</kbd>, <kbd class="bg-olive">borderBottomColor</kbd> and <kbd class="bg-olive">borderLeftColor</kbd> properties allow you to animate the color of the
border on each side of a given element.</li>
</ul>
<p><strong>Remember</strong>: shorthands for <code>borderColor</code> property are not supported.</p>
<h3>Presentation Attributes</h3>
<p>The <a href="attr.html">Attributes Plugin</a> can animate any numerical presentation attribute such as <kbd class="bg-olive">width</kbd>, <kbd class="bg-olive">cx</kbd> or <kbd class="bg-olive">stop-opacity</kbd>, but the values can be
also suffixed: <code>150px</code> or <code>50%</code>, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the
above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.</p>
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or <kbd class="bg-olive">stop-color</kbd>, and they are
removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.
<p>
<p>The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc).
For instance <code>KUTE.to('selector', {attr:{width:150}})</code> is clearly different from <code>KUTE.to('selector', {width:150})</code> which is the the CSS property with the same name.</p>
<p>The plugin handles attribute namespaces properly which means you can use both Javascript notation (like <kbd class="bg-olive">stopColor</kbd>) and HTML markup notation (like <kbd class="bg-olive">'stop-color'</kbd>), see the below
example.</p>
<p>EG: <code>KUTE.to('selector', {attr:{stroke:'blue'}})</code> to animate the stroke of an SVG element or <code>KUTE.to('selector', {attr:{'stop-color':'red'}})</code> to animate the stop color of some SVG gradient.</p>
<h3>Typography Properties</h3>
<p>The <a href="css.html">CSS Plugin</a> also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for <code>scale</code> on browsers that
don't support <code>transform</code> at all. Yes, IE8 and other legacy browsers.</p>
<ul>
<li><kbd class="bg-olive">fontSize</kbd> allows you to animate the <code>font-size</code> for a given element.</li>
<li><kbd class="bg-olive">lineHeight</kbd> allows you to animate the <code>line-height</code> for a given element.</li>
<li><kbd class="bg-olive">letterSpacing</kbd> allows you to animate the <code>letter-spacing</code> for a given element.</li>
<li><kbd class="bg-olive">wordSpacing</kbd> allows you to animate the <code>word-spacing</code> for a given element.</li>
</ul>
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong>.</p>
<h3>Scroll Animation</h3>
<p>KUTE.js core engine currently supports only vertical <kbd class="bg-blue">scroll</kbd> for both the window and a given element that's scrollable (when <code>scrollHeight</code> is higher than <code>offsetHeight</code>). EG: <code>scroll: 150</code> will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks, but we'll have a look at that
later.</p>
<h3>String Properties</h3>
<ul>
<li><kbd class="bg-olive">number</kbd> allows you to tween a number either from 0 or from a current value and updates the <code>innerHTML</code> for a given target. Eg. <code>number:1500</code></li>
<li><kbd class="bg-olive">text</kbd> allows you to write a string one character at a time followed by a scrambling character. Eg. <code>text: 'A demo with &lt;b>substring&lt;/b>'</code>. </li>
</ul>
<p>See <a href="text.html">Text Plugin</a> for details.</p>
<h3>Other Properties</h3>
<ul>
<li><kbd class="bg-olive">clip</kbd> allows you to animate the <code>clip</code> property for a given element. Only rect is supported. Eg. <code>clip:[250,200,300,0]</code>. See
<a href="http://www.w3.org/TR/CSS2/visufx.html#propdef-clip"
target="_blank">spec</a> for details.</li>
<li><kbd class="bg-olive">backgroundPosition</kbd> allows you to animate the <code>background-position</code> for a given element that uses a background image. It only uses % as measurement unit. Eg. <code>backgroundPosition:[50,20]</code></li>
</ul>
<h3>Legend</h3>
<ul>
<li><kbd class="bg-blue">core</kbd> - the property/properties are supported by core animation engine.</li>
<li><kbd class="bg-olive">plugin</kbd> - the property/properties are supported by plugins.</li>
<li><kbd class="bg-red">unsupported</kbd> - the property/properties are NOT supported by core and/or plugins.</li>
</ul>
<h3>Did We Miss Any Important Property?</h3>
<p>Make sure you go to <a href="https://github.com/thednp/kute.js/issues" target="_blank">the issues tracker</a> and report the missing property ASAP, or you can check the <a href="extend.html">extend</a> guide and learn how to develop
a plugin to support a new property yourself.</p>
</div>
<div class="content-wrap">
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<div class="content-wrap">
<h2>Supported Properties</h2>
<p>KUTE.js covers all animation needs by itself for <code>transform</code> properties, <code>scroll</code> for window or a given element, colors. Note: not all browsers support <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> or <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a>. With the help of some plugins it also covers SVG specific properties, presentation attributes, or other CSS properties like <code>border-radius</code>, <code>clip</code>, <code>backgroundPosition</code> and more box model properties.</p>
<p>Starting with KUTE.js version 1.5.0 the supported properties are split among some plugins to have a lighter core engine that gives more power to the developer. Due to it's modular coding, KUTE.js makes it easy to add support for additional properties, so check out the guide on <a href="extend.html">how to extend</a>.</p>
<p>All common measurement units are supported: <code>px</code> and <code>%</code> for translations and box-model properties, or <code>deg</code> and <code>rad</code> for rotations and skews, while <code>clip</code> only supports <code>px</code>. Other properties such as <code>opacity</code>, <code>scale</code> or <code>scroll</code> are unitless, and <code>background-position</code> always uses <code>%</code> as measurement unit. As for the text properties you can use <code>px</code>, <code>em</code>, <code>rem</code>, <code>vh</code> and <code>vw</code>. Be sure to <a href="http://caniuse.com/#feat=viewport-units" target="_blank">check</a> what your browsers support in terms of measurement unit.</p>
<h3>Opacity</h3>
<p>In most cases, the best animation possible is the <code class="bg-blue">opacity</code>, 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 <code>filter: alpha(opacity=0)</code>. Also, opacity can be used for instance on legacy browsers that don't support <code>RGBA</code> colors. Eg. <code>opacity:0.5</code> will make an element semitransparent.</p>
<h3>2D Transform Properties</h3>
<p>The core engine supports most 2D transform properties, but the most important part is that starting with KUTE.js v1.6.0 the values used for animation are always converted from percentage based translation to pixels and radians based angles to degrees, to help improve memory efficiency.</p>
<ul>
<li><kbd class="bg-blue">translate</kbd> property can be used for horizontal and / or vertical movement. EG. <code>translate:150</code> to translate an element 150px to the right or <code>translate:[-150,200]</code> to move the element to the left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">rotate</kbd> property applies rotation to an element on the Z axis or the plain document. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">skewX</kbd> property applies a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew an element by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">skewY</kbd> property applies a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew an element by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-blue">scale</kbd> property applies a single value size transformation. Eg. <code>scale:2</code> will enlarge an element by a degree of 2. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-red">matrix</kbd>, double axis <kbd class="bg-red">skew</kbd> and double axis <kbd class="bg-red">scale</kbd> properties are not supported.</li>
</ul>
<h3>3D Transform Properties</h3>
<p>The core engine supports all 3D transform properties except <code>matrix3d</code> and <code>rotate3d</code>. Just as the above, these properties' values are also converted to traditional pixels and degrees measurements to help improve memory usage.</p>
<ul>
<li><kbd class="bg-blue">translateX</kbd> property is for horizontal translation. EG. <code>translateX:150</code> to translate an element 150px to the right. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translateY</kbd> property is for vertical translation. EG. <code>translateY:-250</code> to translate an element 250px towards the top. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translateZ</kbd> property is for translation on the Z axis in a given 3D field. EG. <code>translateZ:-250</code> to translate an element 250px to it's back, making it smaller. Requires a <code>perspective</code> tween option to be used; the smaller perspective value, the deeper translation. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">translate3d</kbd> property is for movement on all the axis in a given 3D field. EG. <code>translate3d:[-150,200,150]</code> to translate an element 150px to the left, 200px to the bottom and 150px closer to the viewer, making it larger. Also requires using a <code>perspective</code> tween option. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateX</kbd> property rotates an element on the X axis in a given 3D field. Eg. <code>rotateX:250</code> will rotate an element clockwise by 250 degrees. Requires perspective. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateY</kbd> property rotates an element on the Y axis in a given 3D field. Eg. <code>rotateY:-150</code> will rotate an element counter-clockwise by 150 degrees. Requires perspective. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-blue">rotateZ</kbd> property rotates an element on the Z axis and is the equivalent of the 2D rotation. Eg. <code>rotateZ:-150</code> will rotate an element counter-clockwise by 150 degrees. <kbd class="bg-lime">IE10+</kbd></li>
<li><kbd class="bg-red">matrix3d</kbd>, <kbd class="bg-red">rotate3d</kbd>, and <kbd class="bg-red">scale3d</kbd> properties are not supported.</li>
</ul>
<h3>SVG Transform</h3>
<p>The <a href="svg.html">SVG Plugin</a> features cross browser 2D transform animations via the <kbd class="bg-olive">svgTransform</kbd> tween property and the <code>transform</code> presentation attribute, similar in functionality as the Attributes Plugin.</p>
<ul>
<li><kbd class="bg-olive">translate</kbd> sub-property applies horizontal and / or vertical translation. EG. <code>translate:150</code> to translate a shape 150px to the right or <code>translate:[-150,200]</code> to move the element to the left by 150px and to bottom by 200px. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">rotate</kbd> sub-property applies rotation to a shape on the Z axis. Eg. <code>rotate:150</code> will rotate a shape clockwise by 150 degrees around it's own center or around the <code>transformOrigin: '450 450'</code> set tween option coordinate of the parent element. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">skewX</kbd> sub-property used to apply a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew a shape by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">skewY</kbd> sub-property used to apply a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew a shape by 25 degrees. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-olive">scale</kbd> sub-property used to apply a single value size transformation. Eg. <code>scale:0.5</code> will scale a shape to half of it's initial size. <kbd class="bg-lime">IE9+</kbd></li>
<li><kbd class="bg-red">matrix</kbd> sub-property is not supported.</li>
</ul>
<p>As a quick note, the translation is normalized and computed in a way to handle the <code>transformOrigin</code> tween option in all cases, not just for rotations, but also scaling or skews.</p>
<h3>SVG Properties</h3>
<p>The <a href="svg.html">SVG Plugin</a> can animate the <code>d</code> attribute of a given <code>&lt;path&gt;</code> or <code>&lt;glyph&gt;</code> element with the tween property called <kbd class="bg-olive">path</kbd>. The animation effect is widelly known as morph SVG and implemented in various scripts, but the KUTE.js implementation is similar to <a href="http://bl.ocks.org/mbostock/3081153" target="_blank">the D3.js examples</a> for wider usability and the ability to optimize the visual and performance of the morph, all with the help of special tween options and utilities.</p>
<p>Further more, the SVG Plugin can animate the stroke in a way that you probably know as <code>drawSVG</code>. KUTE.js implements it as <kbd class="bg-olive">draw</kbd> tween property that deals with the well known CSS properties: <kbd>strokeDasharray</kbd> and <kbd>strokeDashoffset</kbd>.
<h3>Box Model Properties</h3>
<p>The core engine supports <code>width</code>, <code>height</code>, <code>left</code> and <code>top</code> while the <a href="css.html">CSS Plugin</a> adds support for all other box-model properties.</p>
<ul>
<li><kbd class="bg-blue">left</kbd>, <kbd class="bg-blue">top</kbd>, <kbd class="bg-olive">right</kbd> and <kbd class="bg-olive">bottom</kbd> are <code>position</code> based properties for movement on vertical and / or horizontal axis. These properties require that the element to animate uses <code>position: absolute/relative</code> styling as well as it's parent element requires <code>position:relative</code>. These properties can be used as fallback for browsers with no support for <code>translate</code> properties such as IE8.</li>
<li><kbd class="bg-blue">width</kbd>, <kbd class="bg-blue">height</kbd>, <kbd class="bg-olive">minWidth</kbd>, <kbd class="bg-olive">minHeight</kbd>, <kbd class="bg-olive">maxWidth</kbd>, <kbd class="bg-olive">maxHeight</kbd> are properties that allow you to animate the size of an element on horizontal and / or vertical axis. These properties can be used on images as fallback for <code>scale</code> on IE8 again, as well as for other purposes.</li>
<li><kbd class="bg-olive">padding</kbd>, <kbd class="bg-olive">margin</kbd>, <kbd class="bg-olive">paddingTop</kbd>, <kbd class="bg-olive">paddingBottom</kbd>, <kbd class="bg-olive">paddingLeft</kbd>, <kbd class="bg-olive">paddingRight</kbd>, <kbd class="bg-olive">marginTop</kbd>, <kbd class="bg-olive">marginBottom</kbd>, <kbd class="bg-olive">marginLeft</kbd> and <kbd class="bg-olive">marginRight</kbd> are properties that allow you to animate the spacing of an element inside (via padding) and outside (via margin). Shorthand notations such as <code>margin: "20px 50px"</code> or any other type are not supported.</li>
<li><kbd class="bg-olive">borderWidth</kbd>, <kbd class="bg-olive">borderTopWidth</kbd>, <kbd class="bg-olive">borderRightWidth</kbd>, <kbd class="bg-olive">borderBottomWidth</kbd> are <kbd class="bg-olive">borderLeftWidth</kbd> are properties that allow you to animate the border of an element either on all sides at once or each side separatelly. Shorthand notations are not supported.</li>
<li><kbd class="bg-olive">outlineWidth</kbd> property allows you to animate the <code>outline-width</code> of an element.</li>
</ul>
<p>As a quick side note, starting with KUTE.js v1.6.0 the core engine supported box model properties values are converted from percent based into pixel based values, using the <code>element.offsetWidth</code> as a refference. The idea is the same as presented on the above supported transform properties.</p>
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong> that may force repaint of the entire DOM, drastically affecting performance on lower end and mobile devices. They also trigger <code>resize</code> event that may cause crashes on old browsers such as IE8 when using handlers bound on <code>resize</code>, so use with caution.</p>
<h3>Border Radius</h3>
<p>The <a href="css.html">CSS Plugin</a> covers all the radius properties with the exception that shorthand notations are not implemented.</p>
<ul>
<li><kbd class="bg-olive">borderRadius</kbd> allows you to animate the <code>border-radius</code> on all corners for a given element.</li>
<li><kbd class="bg-olive">borderTopLeftRadius</kbd> allows you to animate the <code>border-top-left-radius</code> for a given element.</li>
<li><kbd class="bg-olive">borderTopRightRadius</kbd> allows you to animate the <code>border-top-right-radius</code> for a given element.</li>
<li><kbd class="bg-olive">borderBottomLeftRadius</kbd> allows you to animate the <code>border-bottom-left-radius</code>for a given element.</li>
<li><kbd class="bg-olive">borderBottomRightRadius</kbd> allows you to animate the <code>border-bottom-right-radius</code>for a given element.</li>
</ul>
<p>For all radius properties above <code>borderRadius:20</code> or <code>borderTopLeftRadius:'25%'</code> will do. In the first case <code>px</code> is the default measurement unit used, while in the second we require using <code>%</code> unit which is relative to the element's size.</p>
<p><strong>Remember</strong>: shorthands for <code>border-radius</code> are not supported. Also KUTE.js does not cover early implementations by Mozilla Firefox (Eg. <code>-moz-border-radius-topleft</code>) as they were deprecated with later versions.</p>
<h3>Color Properties</h3>
<p>The core engine only supports <code>color</code> and <code>backgroundColor</code>, but the <a href="css.html">CSS Plugin</a> covers all the others. KUTE.js currently supports values such as <code>HEX</code>, <code>RGB</code> and <code>RGBA</code> for all color properties, but IE8 does not support <code>RGBA</code> and always uses <code>RGB</code> when detected, otherwise will produce no effect. There is also a tween option <code>keepHex:true</code> to convert the color format. Eg. <code>color: '#ff0000'</code> or <code>backgroundColor: 'rgb(202,150,20)'</code> or <code>borderColor: 'rgba(250,100,20,0.5)'</code>. The IE9+ browsers should also work with <a href="http://www.w3schools.com/colors/colors_names.asp" target="_blank">web safe colors</a>, eg. <code>color: 'red'</code>. </p>
<ul>
<li><kbd class="bg-blue">color</kbd> allows you to animate the color for a given text element.</li>
<li><kbd class="bg-blue">backgroundColor</kbd> allows you to animate the <code>background-color</code> for a given element.</li>
<li><kbd class="bg-olive">outlineColor</kbd> allows you to animate the <code>outline-color</code> for a given element.</li>
<li><kbd class="bg-olive">borderColor</kbd> allows you to animate the <code>border-color</code> on all sides for a given element.</li>
<li><kbd class="bg-olive">borderTopColor</kbd>, <kbd class="bg-olive">borderRightColor</kbd>, <kbd class="bg-olive">borderBottomColor</kbd> and <kbd class="bg-olive">borderLeftColor</kbd> properties allow you to animate the color of the border on each side of a given element.</li>
</ul>
<p><strong>Remember</strong>: shorthands for <code>borderColor</code> property are not supported.</p>
<h3>Presentation Attributes</h3>
<p>The <a href="attr.html">Attributes Plugin</a> can animate any numerical presentation attribute such as <kbd class="bg-olive">width</kbd>, <kbd class="bg-olive">cx</kbd> or <kbd class="bg-olive">stop-opacity</kbd>, but the values can be also suffixed: <code>150px</code> or <code>50%</code>, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.</p>
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or <kbd class="bg-olive">stop-color</kbd>, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.<p>
<p>The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance <code>KUTE.to('selector', {attr:{width:150}})</code> is clearly different from <code>KUTE.to('selector', {width:150})</code> which is the the CSS property with the same name.</p>
<p>The plugin handles attribute namespaces properly which means you can use both Javascript notation (like <kbd class="bg-olive">stopColor</kbd>) and HTML markup notation (like <kbd class="bg-olive">'stop-color'</kbd>), see the below example.</p>
<p>EG: <code>KUTE.to('selector', {attr:{stroke:'blue'}})</code> to animate the stroke of an SVG element or <code>KUTE.to('selector', {attr:{'stop-color':'red'}})</code> to animate the stop color of some SVG gradient.</p>
<h3>Typography Properties</h3>
<p>The <a href="css.html">CSS Plugin</a> also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for <code>scale</code> on browsers that don't support <code>transform</code> at all. Yes, IE8 and other legacy browsers.</p>
<ul>
<li><kbd class="bg-olive">fontSize</kbd> allows you to animate the <code>font-size</code> for a given element.</li>
<li><kbd class="bg-olive">lineHeight</kbd> allows you to animate the <code>line-height</code> for a given element.</li>
<li><kbd class="bg-olive">letterSpacing</kbd> allows you to animate the <code>letter-spacing</code> for a given element.</li>
<li><kbd class="bg-olive">wordSpacing</kbd> allows you to animate the <code>word-spacing</code> for a given element.</li>
</ul>
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong>.</p>
<h3>Scroll Animation</h3>
<p>KUTE.js core engine currently supports only vertical <kbd class="bg-blue">scroll</kbd> for both the window and a given element that's scrollable (when <code>scrollHeight</code> is higher than <code>offsetHeight</code>). EG: <code>scroll: 150</code> will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks, but we'll have a look at that later.</p>
<h3>String Properties</h3>
<ul>
<li><kbd class="bg-olive">number</kbd> allows you to tween a number either from 0 or from a current value and updates the <code>innerHTML</code> for a given target. Eg. <code>number:1500</code></li>
<li><kbd class="bg-olive">text</kbd> allows you to write a string one character at a time followed by a scrambling character. Eg. <code>text: 'A demo with &lt;b>substring&lt;/b>'</code>. </li>
</ul>
<p>See <a href="text.html">Text Plugin</a> for details.</p>
<h3>Other Properties</h3>
<ul>
<li><kbd class="bg-olive">clip</kbd> allows you to animate the <code>clip</code> property for a given element. Only rect is supported. Eg. <code>clip:[250,200,300,0]</code>. See <a href="http://www.w3.org/TR/CSS2/visufx.html#propdef-clip" target="_blank">spec</a> for details.</li>
<li><kbd class="bg-olive">backgroundPosition</kbd> allows you to animate the <code>background-position</code> for a given element that uses a background image. It only uses % as measurement unit. Eg. <code>backgroundPosition:[50,20]</code></li>
</ul>
<h3>Legend</h3>
<ul>
<li><kbd class="bg-blue">core</kbd> - the property/properties are supported by core animation engine.</li>
<li><kbd class="bg-olive">plugin</kbd> - the property/properties are supported by plugins.</li>
<li><kbd class="bg-red">unsupported</kbd> - the property/properties are NOT supported by core and/or plugins.</li>
</ul>
<h3>Did We Miss Any Important Property?</h3>
<p>Make sure you go to <a href="https://github.com/thednp/kute.js/issues" target="_blank">the issues tracker</a> and report the missing property ASAP, or you can check the <a href="extend.html">extend</a> guide and learn how to develop a plugin to support a new property yourself.</p>
</div>
<div class="content-wrap">
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div><!-- /.site-wrapper -->
<!-- /.site-wrapper -->
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
<script src="./src/kute.min.js"></script>
<!-- some stuff -->
<script src="./assets/js/scripts.js"></script>
<!-- some stuff -->
</body>
</html>

220
start.html
View file

@ -3,7 +3,9 @@
<!--[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]-->
<!--[if !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
@ -12,88 +14,89 @@
<meta name="description" content="A quick start guide for KUTE.js, CDN sources, NPM.">
<meta name="keywords" content="kute,kute.js,animation,tweening engine,animation engine,getting started with kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- TO DO -->
<title>Getting Started with KUTE.js | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li class="active"><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="fill overlay"></div>
<div class="content-wrap">
<h2>Getting Started</h2>
<p>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 detail. KUTE.js can be found on <a href="http://www.jsdelivr.com/#!kute.js" target="_blank">CDN</a> and also npm and Bower repositories with all it's features and tools.</p>
<div class="site-wrapper">
<h3>Bower and NPM</h3>
<p>You can install KUTE.js package by using either Bower or NPM.</p>
<pre><code class="language-clike">$ npm install --save kute.js
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li class="active"><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2>Getting Started</h2>
<p>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 detail. KUTE.js can be found on <a href="http://www.jsdelivr.com/#!kute.js" target="_blank">CDN</a> and also npm and Bower repositories with all it's features and tools.</p>
<h3>Bower and NPM</h3>
<p>You can install KUTE.js package by using either Bower or NPM.</p>
<pre><code class="language-clike">$ npm install --save kute.js
# Or
$ bower install --save kute.js
</code></pre>
<h3>Require and CommonJS</h3>
<pre><code class="language-javascript">// CommonJS style
<h3>Require and CommonJS</h3>
<pre><code class="language-javascript">// CommonJS style
var kute = require("kute.js"); //grab the core
require("kute.js/kute-svg"); // Add SVG Plugin
require("kute.js/kute-css"); // Add CSS Plugin
@ -101,7 +104,7 @@ require("kute.js/kute-attr"); // Add Attributes Plugin
require("kute.js/kute-text"); // Add Text Plugin
</code></pre>
<pre><code class="language-javascript">// AMD style
<pre><code class="language-javascript">// AMD style
define([
"kute.js",
"kute.js/kute-jquery.js", // optional for jQuery apps
@ -113,65 +116,72 @@ define([
// ...
});
</code></pre>
<h3>Websites</h3>
<p>In your website add the following code, the best would be to put it at the end of your <code>body</code> tag:</p>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<p>An alternate CDN link here:</p>
<pre><code class="language-markup">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<p>The CDN repositories receive latest updates <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a> and <a href="https://cdnjs.com/libraries/kute.js" target="_blank">right here</a>. You might also want to include the tools that you need for your project:</p>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
<h3>Websites</h3>
<p>In your website add the following code, the best would be to put it at the end of your <code>body</code> tag:</p>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<p>An alternate CDN link here:</p>
<pre><code class="language-markup">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<p>The CDN repositories receive latest updates <a target="_blank" href="http://www.jsdelivr.com/#!kute.js">here</a> and <a href="https://cdnjs.com/libraries/kute.js" target="_blank">right here</a>. You might also want to include the tools that
you need for your project:</p>
<pre><code class="language-markup">&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-css.min.js">&lt;/script> &lt;!-- CSS Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-svg.min.js">&lt;/script> &lt;!-- SVG Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-text.min.js">&lt;/script> &lt;!-- Text Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.6.2/kute-attr.min.js">&lt;/script> &lt;!-- Attributes Plugin -->
</code></pre>
<p>Alternate CDN links:</p>
<pre><code class="language-markup">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
<p>Alternate CDN links:</p>
<pre><code class="language-markup">&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-css.min.js">&lt;/script> &lt;!-- CSS Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-svg.min.js">&lt;/script> &lt;!-- SVG Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-text.min.js">&lt;/script> &lt;!-- Text Plugin -->
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/kute.js/1.6.2/kute-attr.min.js">&lt;/script> &lt;!-- Attributes Plugin -->
</code></pre>
<p>Your awesome animation coding would follow after these script links.</p>
<h3>Targeting Legacy Browsers</h3>
<p>You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers actually support. A quick note here: IE8 doesn't support any <code>transform</code> property or <code>RGBA</code> colors while IE9 can only do 2D transformations. Check the <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> and the <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a> browser support list for more information.</p>
<p>Don't use <a href="https://modernizr.com/" target="_blank">Modernizr</a>, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and <a target="_blank" href="http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">here is the full refference</a> on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: <a href="http://browserhacks.com/" target="_blank">there you go</a>.</p>
<p>Your awesome animation coding would follow after these script links.</p>
<h3>Targeting Legacy Browsers</h3>
<p>You need to know when users' browser is a legacy one in order to use KUTE.js only for what browsers actually support. A quick note here: IE8 doesn't support any <code>transform</code> property or <code>RGBA</code> colors while IE9 can only
do 2D transformations. Check the <a href="http://caniuse.com/#feat=transforms2d" target="_blank">2D transforms</a> and the <a href="http://caniuse.com/#feat=transforms3d" target="_blank">3D transforms</a> browser support list for more
information.</p>
<p>Don't use <a href="https://modernizr.com/" target="_blank">Modernizr</a>, the best thing you can actually do is to use the Microsoft's synthax for it's own legacy browsers, and <a target="_blank" href="http://www.paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">here is the full refference</a> on that. For other legacy browsers there is a ton of ways to target them, quite efficiently I would say: <a href="http://browserhacks.com/" target="_blank">there you go</a>.</p>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div><!-- /.site-wrapper -->
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script> KUTE CDN -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.2/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
<script src="./src/kute.min.js"></script>
<!-- some stuff -->
<script src="./assets/js/scripts.js"></script>
<!-- some stuff -->
</body>
</html>

731
svg.html
View file

@ -3,7 +3,9 @@
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
<!--[if gte IE 10 | !IE ]><!--> <html lang="en"> <!--<![endif]-->
<!--[if gte IE 10 | !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
@ -12,238 +14,258 @@
<meta name="description" content="The SVG Plugin for KUTE.js enables animation for SVG morph, draw SVG, as well as some SVG specific CSS properties.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,svg transform,cross-browser svg transform,tweening engine,animation engine,morph svg,draw svg,svg animation,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- TO DO -->
<title>KUTE.js SVG Plugin | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v3/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li class="active"><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="fill overlay"></div>
<div class="content-wrap">
<h2>SVG Plugin</h2>
<p>The SVG Plugin for KUTE.js extends the core engine and enables animation for various SVG specific CSS properties, SVG morphing of path shapes and SVG transforms. We'll dig into this in great detail as well as provide valuable tips on how to configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.</p>
<p>Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below <a href="http://caniuse.com/#search=svg" target="_blank">do not support inline SVG</a> so make sure to fiter out your SVG tweens.</p>
<h3>SVG Morphing</h3>
<p>One of the most important parts of the plugin is the SVG morphing capability. It only applies to inline <code>&lt;path></code> and <code>&lt;glyph></code> SVG elements, with closed shapes (their <code>d</code> attribute ends with <code>z</code>). On initialization or animation start, depending on the chosen KUTE.js method, it will <a href="http://phrogz.net/SVG/convert_path_to_polygon.xhtml" target="_blank">sample a number of points</a> along the two paths based on a default / given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect of the morph:</p>
<ul>
<li><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 15 but the <a href="http://bl.ocks.org/mbostock/3081153" target="_blank">D3.js example</a> uses 4.</li>
<li><kbd>morphIndex: Number</kbd> 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". By default, this option is not set.</li>
<li><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape. By default this option is <code>false</code>.</li>
<li><kbd>reverseSecondPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the SECOND shape. By default this option is also <code>false</code>.</li>
</ul>
<h4>Basic Example</h4>
<p>In the first morph example we are going to go through some basic steps on how to setup and how to improve the morph animation. Our demo is a morph from a rectangle into a star, so first let's create an SVG element with two paths, first is going to be visible, filled with color, while second is going to be hidden. The first path is the start shape and the second is the end shape, you guessed it, and we can also add some ID to the paths so we can easily target them with our code.</p>
<pre><code class="language-markup">&lt;svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li class="active"><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2>SVG Plugin</h2>
<p>The SVG Plugin for KUTE.js extends the core engine and enables animation for various SVG specific CSS properties, SVG morphing of path shapes and SVG transforms. We'll dig into this in great detail as well as provide valuable tips on how to
configure your animation for best performance and visual aesthetics. The SVG Plugin is very light, maybe one of the lightest out there, still, you will find it to be very powerful and flexible.</p>
<p>Keep in mind that older browsers like Internet Explorer 8 and below as well as stock browser from Android 4.3 and below <a href="http://caniuse.com/#search=svg" target="_blank">do not support inline SVG</a> so make sure to fiter out your SVG
tweens.</p>
<h3>SVG Morphing</h3>
<p>One of the most important parts of the plugin is the SVG morphing capability. It only applies to inline <code>&lt;path></code> and <code>&lt;glyph></code> SVG elements, with closed shapes (their <code>d</code> attribute ends with <code>z</code>).
On initialization or animation start, depending on the chosen KUTE.js method, it will <a href="http://phrogz.net/SVG/convert_path_to_polygon.xhtml" target="_blank">sample a number of points</a> along the two paths based on a default /
given sample size and will create two arrays with these points, the arrays that we need for interpolation. Further more, with a set of options we can then rearrange / reverse these arrays to optimize and / or maximize the visual effect
of the morph:</p>
<ul>
<li><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption and less performance. The default value is 15 but the
<a href="http://bl.ocks.org/mbostock/3081153"
target="_blank">D3.js example</a> uses 4.</li>
<li><kbd>morphIndex: Number</kbd> 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". By default, this option is
not set.</li>
<li><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape. By default this option is <code>false</code>.</li>
<li><kbd>reverseSecondPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the SECOND shape. By default this option is also <code>false</code>.</li>
</ul>
<h4>Basic Example</h4>
<p>In the first morph example we are going to go through some basic steps on how to setup and how to improve the morph animation. Our demo is a morph from a rectangle into a star, so first let's create an SVG element with two paths, first is
going to be visible, filled with color, while second is going to be hidden. The first path is the start shape and the second is the end shape, you guessed it, and we can also add some ID to the paths so we can easily target them with our
code.</p>
<pre><code class="language-markup">&lt;svg id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
&lt;path id="rectangle" class="bg-lime" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531 c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
&lt;path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808 l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
&lt;/svg>
</code></pre>
<p>Now we can apply both <code>.to()</code> and <code>fromTo()</code> methods:</p>
<pre><code class="language-javascript">// the fromTo() method
<p>Now we can apply both <code>.to()</code> and <code>fromTo()</code> methods:</p>
<pre><code class="language-javascript">// the fromTo() method
var tween = KUTE.fromTo('#rectangle', {path: '#rectangle' }, { path: '#star' }).start();
// OR
// the to() method will take the path's d attribute value and use it as start value
var tween = KUTE.to('#rectangle', { path: '#star' }).start();
var tween = KUTE.to('#rectangle', { path: '#star' }).start();
// OR
// simply pass in a valid path string without the need to have two paths in your SVG
var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
</code></pre>
var tween = KUTE.to('#rectangle', { path: 'M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011' }).start();
</code></pre>
<p>For all the above tween objects the animation should look like this:</p>
<p>For all the above tween objects the animation should look like this:</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle" class="bg-red" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
<path id="star" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
<div class="example-buttons">
<a id="morphBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>As you can see, the animation could need some fine tunning. Let's go ahead and play with the new <a href="http://codepen.io/thednp/pen/YGayLg">utility</a>, it's gonna make your SVG morph work a breeze.</p>
<div class="example-buttons">
<a id="morphBtn" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Well, we're going to set the <code>morphIndex: 127</code> tween option and we will get an improved morph. Sometimes the recommended value isn't what we're looking for, so you just have to experience values around the recommended one. I also made a <a href="http://codepen.io/thednp/pen/bpRRZd" target="_blank">pen</a> for you to play with.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<p>As you can see, the animation could need some fine tunning. Let's go ahead and play with the new <a href="http://codepen.io/thednp/pen/YGayLg">utility</a>, it's gonna make your SVG morph work a breeze.</p>
<p>Well, we're going to set the <code>morphIndex: 127</code> tween option and we will get an improved morph. Sometimes the recommended value isn't what we're looking for, so you just have to experience values around the recommended one. I also
made a <a href="http://codepen.io/thednp/pen/bpRRZd" target="_blank">pen</a> for you to play with.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path id="rectangle1" class="bg-blue" d="M38.01,5.653h526.531c17.905,0,32.422,14.516,32.422,32.422v526.531
c0,17.905-14.517,32.422-32.422,32.422H38.01c-17.906,0-32.422-14.517-32.422-32.422V38.075C5.588,20.169,20.104,5.653,38.01,5.653z"/>
<path id="star1" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011"/>
</svg>
<div class="example-buttons">
<a id="morphBtn1" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Much better! You can play with the <code>morphIndex</code> value, maybe you can get a more interesting morph.</p>
<h4>Morphing Polygon Paths</h4>
<p>When your paths are only <code>lineto</code>, <code>vertical-lineto</code> and <code>horizontal-lineto</code> based shapes (the <code>d</code> attribute consists of <code>L</code>, <code>V</code> and <code>H</code> path commands), the SVG Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The <code>morphPrecision</code> option will not apply since the paths are already polygons, still you will have access to all the other options.</p>
<p>The plugin will try to convert paths to absolute values for polygons, but it might not find most accurate coordinates values for relative <code>v</code> and <code>h</code> path commands. I highly recommend using my <a href="http://codepen.io/thednp/full/EgVqLw/">utility converter</a> to prepare your paths in that case.</p>
<pre><code class="language-javascript">// let's morph a triangle into a star
</svg>
<div class="example-buttons">
<a id="morphBtn1" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Much better! You can play with the <code>morphIndex</code> value, maybe you can get a more interesting morph.</p>
<h4>Morphing Polygon Paths</h4>
<p>When your paths are only <code>lineto</code>, <code>vertical-lineto</code> and <code>horizontal-lineto</code> based shapes (the <code>d</code> attribute consists of <code>L</code>, <code>V</code> and <code>H</code> path commands), the SVG
Plugin will work differently: it will use their points instead of sampling new ones. As a result, we boost the visual and maximize the performance. The <code>morphPrecision</code> option will not apply since the paths are already polygons,
still you will have access to all the other options.</p>
<p>The plugin will try to convert paths to absolute values for polygons, but it might not find most accurate coordinates values for relative <code>v</code> and <code>h</code> path commands. I highly recommend using my <a href="http://codepen.io/thednp/full/EgVqLw/">utility converter</a> to prepare your paths in that case.</p>
<pre><code class="language-javascript">// let's morph a triangle into a star
var tween1 = KUTE.to('#triangle', { path: '#star' }).start();
// or same path into a square
var tween2 = KUTE.to('#triangle', { path: '#square' }).start();
</code></pre>
<p>In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each tween the morph will use the number of points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.</p>
<div class="featurettes">
<p>In the example below the triangle shape will morph into a square, then the square will morph into a star, so 2 tweens chained with a third that will morph back to the original triangle shape. For each tween the morph will use the number of
points from the shape with most points as a sample size for the other shape. Let's have a look at the demo.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<svg class="example-box-model example-box" id="morph-example2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600" >
<path id="square" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 L576.715,584.766 L25.508,584.766 L25.508,12.011 z"/>
<path id="square2" style="visibility:hidden" d="M25.508,12.011 H576.715 V584.766 H25.508 V12.011z"/>
<path id="square3" style="visibility:hidden" d="M25.508,12.011 L576.715,12.011 V584.766 L25.508,584.766 V12.011 z"/>
<path id="triangle" fill="#673AB7" d="M301.113,12.011L576.715,584.766L25.508,584.766L301.113,12.011z"/>
<path id="star2" style="visibility:hidden" d="M301.113,12.011l99.25,179.996l201.864,38.778L461.706,380.808
l25.508,203.958l-186.101-87.287L115.01,584.766l25.507-203.958L0,230.785l201.86-38.778L301.113,12.011z"/>
</svg>
<div class="example-buttons">
<a id="morphBtn2" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only <code>L</code> path command will make sure to prevent value processing and allow the animation to start as fast as possible.</p>
<div class="example-buttons">
<a id="morphBtn2" class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The morph for polygon paths is the best morph in terms of performance so it's worth keeping that in mind. Also using paths with only <code>L</code> path command will make sure to prevent value processing and allow the animation to start as
fast as possible.</p>
<h4>Multi Path Example</h4>
<p>In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:</p>
<pre><code class="language-markup">&lt;svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
&lt;path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z
M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z
<h4>Multi Path Example</h4>
<p>In other cases, you may want to morph paths that have subpaths. Let's have a look at the following paths:</p>
<pre><code class="language-markup">&lt;svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
&lt;path d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z
M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z
M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z
M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
&lt;path d="M0.175 256l-0.175-156.037 192-26.072v182.109z
M224 69.241l255.936-37.241v224h-255.936z
M479.999 288l-0.063 224-255.936-36.008v-187.992z
M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
&lt;/svg>
</code></pre>
<p>As you can see, both these paths have subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.</p>
<pre><code class="language-markup">&lt;svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<p>As you can see, both these paths have subpaths, and KUTE.js will only animate the first of both in this case. To animate them all, we need to break them into multiple paths, so we can handle each path morph properly.</p>
<pre><code class="language-markup">&lt;svg id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
&lt;path id="w11" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
&lt;path id="w12" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
&lt;path id="w13" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
&lt;path id="w14" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
&lt;path id="w21" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
&lt;path id="w22" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
&lt;path id="w23" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
&lt;path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
&lt;path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
&lt;/svg>
</code></pre>
<p>After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: <code>#w11</code> to <code>#w24</code>, <code>#w13</code> to <code>#w21</code>, <code>#w14</code> to <code>#w22</code> and <code>#w12</code> to <code>#w23</code>.</p>
<p>Now we can write the tween objects and get to working:</p>
<pre><code class="language-javascript">var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
<p>After a close inspection we determined that paths are not ordered the same so it seems we need to tween the paths in a way that their points travel the least possible distance, as follows: <code>#w11</code> to <code>#w24</code>, <code>#w13</code> to <code>#w21</code>, <code>#w14</code> to <code>#w22</code> and <code>#w12</code> to <code>#w23</code>.</p>
<p>Now we can write the tween objects and get to working:</p>
<pre><code class="language-javascript">var multiMorph1 = KUTE.to('#w11', { path: '#w24' }).start();
var multiMorph2 = KUTE.to('#w13', { path: '#w21' }).start();
var multiMorph3 = KUTE.to('#w14', { path: '#w22' }).start();
var multiMorph3 = KUTE.to('#w12', { path: '#w23' }).start();
</code></pre>
<p>As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a minute or two tweaking the options, here's what we should see:</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550" >
<p>As you can imagine, it's quite hard if not impossible to code something that would do all this work automatically, so after a minute or two tweaking the options, here's what we should see:</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 550 550">
<path id="w11" fill="#e91b1f" d="M206.115,255.957c-23.854-12.259-47.043-18.479-68.94-18.479c-2.978,0-5.976,0.09-8.974,0.354 c-27.94,2.312-53.461,9.684-69.875,15.414c-4.354,1.599-8.817,3.288-13.415,5.152L0,414.096 c30.851-11.416,58.146-16.969,83.135-16.969c40.423,0,69.764,15.104,93.996,30.652c11.481-38.959,39.022-133.045,47.241-161.162 C218.397,262.975,212.334,259.332,206.115,255.957z"/>
<path id="w12" fill="#FF5722" d="M264.174,295.535l-45.223,157.074c13.416,7.686,58.549,32.024,93.105,32.024 c27.896,0,59.127-7.147,95.417-21.896l43.179-150.988c-29.316,9.461-57.438,14.26-83.732,14.26 C318.945,326.01,285.363,310.461,264.174,295.535z"/>
<path id="w13" fill="#4CAF50" d="M146.411,184.395c38.559,0.399,67.076,15.104,90.708,30.251l46.376-158.672c-9.772-5.598-35.403-19.547-53.929-24.3c-12.193-2.842-25.01-4.308-38.602-4.308c-25.898,0.488-54.194,6.973-86.444,19.9 L60.3,202.564c32.404-12.218,60.322-18.17,86.043-18.17C146.366,184.395,146.411,184.395,146.411,184.395L146.411,184.395z"/>
<path id="w14" fill="#2196F3" d="M512,99.062c-29.407,11.416-58.104,17.233-85.514,17.233c-45.844,0-79.646-15.901-101.547-31.183L278.964,244.23 c30.873,19.854,64.146,29.939,99.062,29.939c28.474,0,57.97-6.84,87.73-20.344l-0.091-1.111l1.867-0.443L512,99.062z"/>
<path id="w21" style="visibility:hidden" d="M0.175 256l-0.175-156.037 192-26.072v182.109z"/>
<path id="w22" style="visibility:hidden" d="M224 69.241l255.936-37.241v224h-255.936z"/>
<path id="w23" style="visibility:hidden" d="M479.999 288l-0.063 224-255.936-36.008v-187.992z"/>
<path id="w24" style="visibility:hidden" d="M192 471.918l-191.844-26.297-0.010-157.621h191.854z"/>
</svg>
<div class="example-buttons">
<a id="multiMorphBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Note that this final touch required using <code>reverseSecondPath:true</code> option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the <a href="assets/js/svg.js" target="_blank">svg.js</a> for a full code review.</p>
<h4>Complex Example</h4>
<p>The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant differences of their positions. In this case you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you should be just like in the previous example.</p>
<p>An important aspect of multi path morph is syncronization: since the <code>.to()</code> method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, the problem can be easily solved as always using the <code>.fromTo()</code> method. So, let's get into it:</p>
<pre><code class="language-javascript">// complex multi morph, the paths should be self explanatory
</svg>
<div class="example-buttons">
<a id="multiMorphBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Note that this final touch required using <code>reverseSecondPath:true</code> option for all tweens because each shape have a slightly different position from its corresponding shape, so make sure to check the <a href="assets/js/svg.js" target="_blank">svg.js</a> for a full code review.</p>
<h4>Complex Example</h4>
<p>The last morph example is a bit more complex as the paths have subpaths with different positions and other important differences such as having different amounts of subpaths as well as significant differences of their positions. In this case
you have to manually clone one or more paths in a way that the number of starting shapes is equal to the number of ending shapes, as well as making sure the starting shapes are close to their corresponding end shapes; at this point you
should be just like in the previous example.</p>
<p>An important aspect of multi path morph is syncronization: since the <code>.to()</code> method will prepare the paths for interpolation at animation start, and this usually takes a bit of time, the problem can be easily solved as always using
the <code>.fromTo()</code> method. So, let's get into it:</p>
<pre><code class="language-javascript">// complex multi morph, the paths should be self explanatory
var morph1 = KUTE.fromTo('#start-container', { path: '#start-container' }, { path: '#end-container' });
var morph2 = KUTE.fromTo('#startpath1', { path: '#startpath1' }, { path: '#endpath1' });
var morph3 = KUTE.fromTo('#startpath1-clone', { path: '#startpath1-clone' }, { path: '#endpath1' });
var morph4 = KUTE.fromTo('#startpath2', { path: '#startpath2' }, { path: '#endpath2' });
</code></pre>
<p>As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next example, we have used a <code>mask</code> where we included the subpaths of both start and end shape, just to get the same visual as the originals.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<p>As with the previous example, you should change which path will morph to which path so that their points travel the least possible distance and the morph animation looks visually appealing. In the next example, we have used a <code>mask</code> where we included the subpaths of both start and end shape, just to get the same visual as the originals.</p>
<div class="featurettes">
<svg class="example-box-model example-box" id="multi-morph-example-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<defs>
<mask id="symbol">
<rect width="100%" height="100%" fill="#fff"></rect>
@ -253,91 +275,109 @@ var morph4 = KUTE.fromTo('#startpath2', { path: '#startpath2' }, {
<path id="eye-right" style="visibility: hidden;" d="M352 128c17.673 0 32 21.49 32 48s-14.327 48-32 48-32-21.49-32-48 14.327-48 32-48z"></path>
<path id="eye-left" style="visibility: hidden;" d="M176 156.031c29.823 0 51 11.166 51 28.641 0 3.699 1.906 21.497-0.085 24.797-7.414-12.288-27.405-21.094-50.915-21.094s-43.501 8.806-50.915 21.094c-1.991-3.3-0.085-21.098-0.085-24.797 0-17.475 21.177-28.641 51-28.641z"></path>
<path id="mouth" style="visibility: hidden;" d="M250.172 416c-59.621 0-111.929-32.14-141.446-80.476 35.205 27.53 97.267 32.905 162.644 19.989 70.124-13.853 124.555-45.771 144.227-88.297-10.827 83.98-80.759 148.784-165.425 148.784z"></path>
</mask>
</mask>
</defs>
<path id="rectangle-container" fill="#2196F3" mask="url(#symbol)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path id="circle-container" style="visibility: hidden;" d="M256 0c-141.385 0-256 114.614-256 256s114.614 256 256 256c141.385 0 256-114.615 256-256 0-141.386-114.615-256-256-256z"></path>
</svg>
<div class="example-buttons">
<a id="compliMorphBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>So you have many options to improve the visual and performance for your complex animation ideas. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a lighter script, it might be a better solution for your applications.</p>
<h4>Recommendations</h4>
<ul>
<li>The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.</li>
<li>When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget about mobile devices.</li>
<li>Large displays would need best resolution possible so a small <code>morphPrecision</code> value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost any value, including the default value.</li>
<li>Polygons with only <code>lineto</code> path commands are best for performance.</li>
<li>Faster animation speed could be a great trick to hide any polygonal "artefacts". Strokes are also very useful for hiding the polygons' edges.</li>
<li>Don't forget about the <a href="http://codepen.io/thednp/pen/YGayLg">path morph utility</a>, it's gonna make your work a lot easier.</li>
<li>The SVG morph performance is the same for both <code>.to()</code> and <code>.fromTo()</code> methods, but the ones that use the second method will start faster, because the values have been prepared already and for the first method the processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the <code>.to()</code> based morph will always start later. Of course this assumes the you cache the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will be delayed.</li>
</ul>
<h3>Drawing Stroke</h3>
<p>Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <code>&lt;path></code> shapes, <code>&lt;circle></code>, <code>&lt;ellipse></code>, <code>&lt;rect></code>, <code>&lt;line></code>, <code>&lt;polyline></code> and <code>&lt;polygon></code> shapes are also supported; the script uses the SVG standard <code>.getTotalLength()</code> method for <code>&lt;path></code> shapes, while the others use some helper methods. Here some code examples:</p>
<pre><code class="language-javascript">// draw the stroke from 0-10% to 90-100%
<div class="example-buttons">
<a id="compliMorphBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>So you have many options to improve the visual and performance for your complex animation ideas. The SVG Plugin for KUTE.js uses approximatelly the same algorithm as D3.js for determining the coordinates for tween, it's super light, it's a
lighter script, it might be a better solution for your applications.</p>
<h4>Recommendations</h4>
<ul>
<li>The SVG morph animation is very expensive so try to optimize the number of morph animations that run at the same time.</li>
<li>When morphing subpaths/multipaths instead of cloning shapes to have same number of shapes in both starting and ending shapes, you should also consider a fade and/or scale animation to improve the overal animation performance, don't forget
about mobile devices.</li>
<li>Large displays would need best resolution possible so a small <code>morphPrecision</code> value (1-10) would be required, assuming performant hardware are powering the displays. For small displays you can get quite comfortable with almost
any value, including the default value.</li>
<li>Polygons with only <code>lineto</code> path commands are best for performance.</li>
<li>Faster animation speed could be a great trick to hide any polygonal "artefacts". Strokes are also very useful for hiding the polygons' edges.</li>
<li>Don't forget about the <a href="http://codepen.io/thednp/pen/YGayLg">path morph utility</a>, it's gonna make your work a lot easier.</li>
<li>The SVG morph performance is the same for both <code>.to()</code> and <code>.fromTo()</code> methods, but the ones that use the second method will start faster, because the values have been prepared already and for the first method the
processing of the two paths happens on tween start delaying the animation, so keep that in mind when working with syncing multiple tweens, the <code>.to()</code> based morph will always start later. Of course this assumes the you cache
the tween objects first and start the animation later, if not (you start the animation on object creation), both methods will be delayed.</li>
</ul>
<h3>Drawing Stroke</h3>
<p>Next, we're going to animate the stroking of some elements. Starting with KUTE.js version 1.5.2, along with <code>&lt;path></code> shapes, <code>&lt;circle></code>, <code>&lt;ellipse></code>, <code>&lt;rect></code>, <code>&lt;line></code>,
<code>&lt;polyline></code> and <code>&lt;polygon></code> shapes are also supported; the script uses the SVG standard <code>.getTotalLength()</code> method for <code>&lt;path></code> shapes, while the others use some helper methods. Here
some code examples:</p>
<pre><code class="language-javascript">// draw the stroke from 0-10% to 90-100%
var tween1 = KUTE.fromTo('selector1',{draw:'0% 10%'}, {draw:'90% 100%'});
// draw the stroke from zero to full path length
var tween2 = KUTE.fromTo('selector1',{draw:'0% 0%'}, {draw:'0% 100%'});
// draw the stroke from full length to 50%
var tween3 = KUTE.fromTo('selector1',{draw:'0% 100%'}, {draw:'50% 50%'});
</code></pre>
<p>We're gonna chain these tweens and start the animation real quick.</p>
<div class="featurettes">
<svg style="width:600px" class="example-box-model example-box" id="draw-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2046 513">
<path fill="none" style="stroke:#2196F3; stroke-width:20; stroke-dashoffset: -724.077px; stroke-dasharray: 0px, 1448.15px" id="drawSVG" d="M432 64l-240 240-112-112-80 80 192 192 320-320z"/>
<circle fill="none" r="220" cx="780" cy="255" style="stroke:#4CAF50; stroke-width:20; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG1"/>
<ellipse fill="none" rx="220" ry="100" cx="780" cy="255" style="stroke:#55c55a; stroke-width:20; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG11"/>
<rect fill="none" width="430" height="430" x="1070" y="30" style="stroke:#FF5722; stroke-width:20; stroke-dashoffset: -860px; stroke-dasharray: 0px, 1720px" id="drawSVG2"/>
<polygon fill="none" points="1579,307 1623,117 1801,33 1978,117 2022,307 1899,460 1702,460 1579,307" style="stroke:#673AB7; stroke-width:20; stroke-dashoffset: -860px; stroke-dasharray: 0px, 1720px" id="drawSVG3"/>
</svg>
<div class="example-buttons">
<a id="drawBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Remember: the <code class="bg-indigo">draw</code> property also accepts absolute values, eg. <code>draw: '0 150'</code>; the <code>.to()</code> method takes <code>0% 100%</code> as start value for your tweens when <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> are not set.</p>
<h3>SVG Transforms</h3>
<p>Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight and solve most browser inconsistencies. A very simple roadmap was described <a href="https://github.com/thednp/kute.js/issues/31" target="_blank">here</a>; in brief we needed to find a way to enable SVG transforms in a <a href="https://css-tricks.com/transforms-on-svg-elements/" target="_blank">reliable and cross-browser</a> supported fashion.</p>
<p>With KUTE.js 1.6.0 the SVG transform is a bigger part of the SVG Plugin for two reasons: first is the ability to use the <code>transformOrigin</code> just like for CSS3 transforms and secondly the unique way to normalize translation to work with the transform origin in a way that the animation is just as consistent as for CSS3 transforms on non-SVG elements. Also the value processing is consistent with the <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">working draft</a>.</p>
<p>While you can still use regular <a href="examples.html">CSS3 transforms</a> for SVGs on browsers like Google Chrome, Opera and others, Firefox struggles big time with the percentage based <code>transform-origin</code> values and ALL Internet Explorer versions have no implementation for CSS3 transforms on SVG elements.</p>
<p>KUTE.js SVG Plugin comes with a better way to animate transforms on SVGs shapes reliably on all browsers, by the use of the <code>transform</code> presentation attribute and the <code class="bg-indigo">svgTransform</code> tween property with a special notation:</p>
<p>We're gonna chain these tweens and start the animation real quick.</p>
<div class="featurettes">
<svg style="width:600px" class="example-box-model example-box" id="draw-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2046 513">
<path fill="none" style="stroke:#2196F3; stroke-width:20; stroke-dashoffset: -724.077px; stroke-dasharray: 0px, 1448.15px" id="drawSVG" d="M432 64l-240 240-112-112-80 80 192 192 320-320z"/>
<circle fill="none" r="220" cx="780" cy="255" style="stroke:#4CAF50; stroke-width:20; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG1"/>
<ellipse fill="none" rx="220" ry="100" cx="780" cy="255" style="stroke:#55c55a; stroke-width:20; stroke-dashoffset: -690.8px; stroke-dasharray: 0px, 1381.6px" id="drawSVG11"/>
<rect fill="none" width="430" height="430" x="1070" y="30" style="stroke:#FF5722; stroke-width:20; stroke-dashoffset: -860px; stroke-dasharray: 0px, 1720px" id="drawSVG2"/>
<polygon fill="none" points="1579,307 1623,117 1801,33 1978,117 2022,307 1899,460 1702,460 1579,307" style="stroke:#673AB7; stroke-width:20; stroke-dashoffset: -860px; stroke-dasharray: 0px, 1720px" id="drawSVG3"/>
</svg>
<div class="example-buttons">
<a id="drawBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Remember: the <code class="bg-indigo">draw</code> property also accepts absolute values, eg. <code>draw: '0 150'</code>; the <code>.to()</code> method takes <code>0% 100%</code> as start value for your tweens when <code>stroke-dasharray</code> and <code>stroke-dashoffset</code> are not set.</p>
<pre><code class="language-javascript">// using the svgTransform property works in all SVG enabled browsers
var tween2 = KUTE.to('shape', {svgTransform: { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }});
<h3>SVG Transforms</h3>
<p>Starting with KUTE.js 1.5.2, the SVG Plugin features a new tween property for cross browser SVG transforms, but was coded as a separate set of methods for SVG only, to keep performance tight and solve most browser inconsistencies. A very simple
roadmap was described <a href="https://github.com/thednp/kute.js/issues/31" target="_blank">here</a>; in brief we needed to find a way to enable SVG transforms in a <a href="https://css-tricks.com/transforms-on-svg-elements/" target="_blank">reliable and cross-browser</a> supported fashion.</p>
<p>With KUTE.js 1.6.0 the SVG transform is a bigger part of the SVG Plugin for two reasons: first is the ability to use the <code>transformOrigin</code> just like for CSS3 transforms and secondly the unique way to normalize translation to work
with the transform origin in a way that the animation is just as consistent as for CSS3 transforms on non-SVG elements. Also the value processing is consistent with the <a href="https://www.w3.org/TR/SVG/coords.html#EstablishingANewUserSpace">working draft</a>.</p>
<p>While you can still use regular <a href="examples.html">CSS3 transforms</a> for SVGs on browsers like Google Chrome, Opera and others, Firefox struggles big time with the percentage based <code>transform-origin</code> values and ALL Internet
Explorer versions have no implementation for CSS3 transforms on SVG elements.</p>
<p>KUTE.js SVG Plugin comes with a better way to animate transforms on SVGs shapes reliably on all browsers, by the use of the <code>transform</code> presentation attribute and the <code class="bg-indigo">svgTransform</code> tween property with
a special notation:</p>
<pre><code class="language-javascript">// using the svgTransform property works in all SVG enabled browsers
var tween2 = KUTE.to('shape', {svgTransform: { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }});
// regular CSS3 transforms apply to SVG elements but not all browsers fully/partially supported
var tween1 = KUTE.to('shape', { translate: [150,100], rotate: 45, skewX: 15, skewY: 20, scale: 1.5 }, { transformOrigin: '50% 50%' });
</code></pre>
<p>As you can see we have some familiar notation, but an important notice here is that <code class="bg-indigo">svgTransform</code> tween property treat all SVG transform functions as if you are using the <code>50% 50%</code> of the shape box at all times by default, even if the default value is "0px 0px 0px" on SVGs in most browsers.</p>
<p>Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the <code>transform</code> attribute accepts no measurement units such as degrees or pixels. For these reasons the <code>transformOrigin</code> tween option can also accept array values just in case you need coordinates relative to the parent <code>&lt;svg></code> element. Also values like <i>top left</i> values will work.</p>
<p>In the following examples we showcase the animation of CSS3 transform applied to SVG shapes (LEFT) as well as <code class="bg-indigo">svgTransform</code> based animations (RIGHT). I highly encourage you to test all of them in all browsers, and as a word ahead, animations in Webkit browsers will look identical, while others are inconsistent or not responding to DOM changes. Let's break it down to pieces.</p>
<p>As you can see we have some familiar notation, but an important notice here is that <code class="bg-indigo">svgTransform</code> tween property treat all SVG transform functions as if you are using the <code>50% 50%</code> of the shape box
at all times by default, even if the default value is "0px 0px 0px" on SVGs in most browsers.</p>
<p>Perhaps the most important thing to remember is the fact that SVG tranformations always use SVG coordinates system, and the <code>transform</code> attribute accepts no measurement units such as degrees or pixels. For these reasons the <code>transformOrigin</code> tween option can also accept array values just in case you need coordinates relative to the parent <code>&lt;svg></code> element. Also values like <i>top left</i> values will work.</p>
<p>In the following examples we showcase the animation of CSS3 transform applied to SVG shapes (LEFT) as well as <code class="bg-indigo">svgTransform</code> based animations (RIGHT). I highly encourage you to test all of them in all browsers,
and as a word ahead, animations in Webkit browsers will look identical, while others are inconsistent or not responding to DOM changes. Let's break it down to pieces.</p>
<h4>SVG Rotation</h4>
<p>Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. As of with KUTE.js 1.6.0 the <code class="bg-indigo">svgTransform</code> will only accept single value for the angle value <code>rotate: 45</code>, the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a <code>transformOrigin</code> tween option to override the behavior.</p>
<p>The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department. Let's have a look at a quick demo:</p>
<div class="featurettes">
<svg id="svgRotate" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-olive" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-blue" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<h4>SVG Rotation</h4>
<p>Our first chapter of the SVG transform is all about rotations, perhaps the most important part here. As of with KUTE.js 1.6.0 the <code class="bg-indigo">svgTransform</code> will only accept single value for the angle value <code>rotate: 45</code>,
the rotation will go around the shape's center point by default, again, contrary to the browsers' default value and you can set a <code>transformOrigin</code> tween option to override the behavior.</p>
<p>The argument for this implementation is that this is something you would expect from regular HTML elements rotation and probably most needed, not to mention the amount of savings in the codebase department. Let's have a look at a quick demo:</p>
<div class="featurettes">
<svg id="svgRotate" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-olive" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-blue" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
</svg>
<div class="example-buttons">
<a id="rotateBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set <code>transformOrigin</code> option to <i>50% 50%</i>, but this animation doesn't work in IE browsers, while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the <code>rotate: 360</code> notation and the animation shows the shape rotating around it's own central point and without any option, an animation that DO WORK in all SVG enabled browsers.</p>
<p>When for CSS3 transforms we could have used values such as <i>center bottom</i> as <code>transform-origin</code> (also not supported in all modern browsers for SVGs), the entire processing was basically in/by the browser, however when it comes to SVGs the plugin here will compute the <code>transformOrigin</code> tween setting value accordingly to use a shape's <code>.getBBox()</code> value to determine for instance the coordinates for <i>25% 75%</i> position or <i>center top</i>.</p>
<p>In other cases you may want to rotate shapes around the center point of the parent <code>&lt;svg></code> or <code>&lt;g></code> element, and we use it's <code>.getBBox()</code> to determine the <i>50% 50%</i> coordinate, so here's how to deal with it:</p>
<div class="example-buttons">
<a id="rotateBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween uses the CSS3 transform notation and the animation clearly shows the shape rotating around it's center coordinate, as we've set <code>transformOrigin</code> option to <i>50% 50%</i>, but this animation doesn't work in IE browsers,
while in Firefox is inconsistent with the SVG coordinate system. The second tween uses the <code>rotate: 360</code> notation and the animation shows the shape rotating around it's own central point and without any option, an animation
that DO WORK in all SVG enabled browsers.</p>
<p>When for CSS3 transforms we could have used values such as <i>center bottom</i> as <code>transform-origin</code> (also not supported in all modern browsers for SVGs), the entire processing was basically in/by the browser, however when it comes
to SVGs the plugin here will compute the <code>transformOrigin</code> tween setting value accordingly to use a shape's <code>.getBBox()</code> value to determine for instance the coordinates for <i>25% 75%</i> position or <i>center top</i>.</p>
<pre><code class="language-javascript">// rotate around parent svg's "50% 50%" coordinate as transform-origin
<p>In other cases you may want to rotate shapes around the center point of the parent <code>&lt;svg></code> or <code>&lt;g></code> element, and we use it's <code>.getBBox()</code> to determine the <i>50% 50%</i> coordinate, so here's how to deal
with it:</p>
<pre><code class="language-javascript">// rotate around parent svg's "50% 50%" coordinate as transform-origin
// get the bounding box of the parent element
var svgBB = element.ownerSVGElement.getBBox(); // returns an object of the parent &lt;svg> element
@ -355,154 +395,175 @@ var svgOriginY = svgBB.height * 50 / 100 - translation[1];
var rotationTween = KUTE.to(element, {svgTransform: {rotate: 150}}, { transformOrigin: [svgOriginX, svgOriginY]} );
</code></pre>
<div class="featurettes">
<svg id="svgRotate1" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-olive" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-blue" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
</svg>
<div class="example-buttons">
<a id="rotateBtn1" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Note that this is the only SVG transform example in which we have adapted the <code>transform-origin</code> for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are interested in learning about this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check <a href="./assets/js/svg.js">svg.js</a> file.</p>
<h4>SVG Translation</h4>
<p>In this example we'll have a look at translations, so when setting <code>translate: [150,0]</code>, the first value is X (horizontal) coordinate to which the shape will translate to and the second value is Y (vertical) coordinate for translation. When <code>translate: 150</code> notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements transformation. Let's have a look at a quick demo:</p>
<div class="featurettes">
<svg id="svgTranslate" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-green" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-orange" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
</svg>
<div class="example-buttons">
<a id="translateBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween uses the CSS3 <code>translate: 580</code> notation for the end value, while the second tween uses the <code>translate: [0,0]</code> as <code class="bg-indigo">svgTransform</code> value. For the second example the values are unitless and are relative to the <code>viewBox</code> attribute.</p>
<h4>SVG Skew</h4>
<p>For skews for SVGs we have a very simple notation: <code>skewX: 25</code> or <code>skewY: -25</code> as SVGs don't support the <code>skew: [X,Y]</code> function. Here's a quick demo:</p>
<div class="featurettes">
<svg id="svgSkew" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-yellow" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-indigo" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
</svg>
<div class="example-buttons">
<a id="skewBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the <code class="bg-indigo">svgTransform</code> tween property. You will notice translation kicking in to set the transform origin and the example also showcases the fact that chain transformations for SVGs via <code>transform</code> attribute works just as for the CSS3 transformations.</p>
<h4>SVG Scaling</h4>
<p>Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like <code>scale: 1.5</code>, for both X (horizontal) axis and Y (vertical) axis, to keep it simple and even if SVGs do support <code>scale(X,Y)</code>. But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to make the animation look as we would expect. A quick demo:</p>
<div class="featurettes">
<svg id="svgScale" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-lime" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-olive" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<div class="featurettes">
<svg id="svgRotate1" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-olive" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-blue" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
</svg>
<div class="example-buttons">
<a id="scaleBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween scales the shape at <code>scale: 1.5</code> via regular CSS3 transforms, and the second tween scales down the shape at <code>scale: 0.5</code> value via <code class="bg-indigo">svgTransform</code>. If you inspect the elements, you will notice for the second shape translation is involved, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. A similar case as with the skews.</p>
<div class="example-buttons">
<a id="rotateBtn1" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Note that this is the only SVG transform example in which we have adapted the <code>transform-origin</code> for the CSS3 transform rotation so that both animations look consistent in all browsers, and if you are interested in learning about
this fix, similar to the above, just we are adding "px" to the calculated value, but you better make sure to check <a href="./assets/js/svg.js">svg.js</a> file.</p>
<h4>SVG Mixed Transform Functions</h4>
<p>Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation <code>transform-origin</code> to make it look as you would expect it from regular HTML elements. Let's combine 3 functions at the same time and see what happens:</p>
<div class="featurettes">
<svg id="svgMixed" class="example-box-model example-box" style="width: 320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<path class="bg-green" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-indigo" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<h4>SVG Translation</h4>
<p>In this example we'll have a look at translations, so when setting <code>translate: [150,0]</code>, the first value is X (horizontal) coordinate to which the shape will translate to and the second value is Y (vertical) coordinate for translation.
When <code>translate: 150</code> notation is used, the script will understand that's the X value and the Y value is 0 just like for the regular HTML elements transformation. Let's have a look at a quick demo:</p>
<div class="featurettes">
<svg id="svgTranslate" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-green" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-orange" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
</svg>
<div class="example-buttons">
<a id="mixedBtn" class="btn btn-teal" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Both shapes are scaled at <code>scale: 1.5</code>, translated to <code>translate: 250</code> and skewed at <code>skewX: -15</code>. If you inspect the elements, you will notice the second shape's translation is different from what we've set in the tween object, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. This means that the plugin will also compensate rotation transform origin when skews are used, so that both CSS3 transform property and SVG transform attribute have an identical animation.</p>
<h4>Chained SVG transforms</h4>
<p>The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom <code>transform-origin</code>, it should look like this:</p>
<pre><code class="language-markup">&lt;svg>
<div class="example-buttons">
<a id="translateBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween uses the CSS3 <code>translate: 580</code> notation for the end value, while the second tween uses the <code>translate: [0,0]</code> as <code class="bg-indigo">svgTransform</code> value. For the second example the values are
unitless and are relative to the <code>viewBox</code> attribute.</p>
<h4>SVG Skew</h4>
<p>For skews for SVGs we have a very simple notation: <code>skewX: 25</code> or <code>skewY: -25</code> as SVGs don't support the <code>skew: [X,Y]</code> function. Here's a quick demo:</p>
<div class="featurettes">
<svg id="svgSkew" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-yellow" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-indigo" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
</svg>
<div class="example-buttons">
<a id="skewBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween skews the shape on both X and Y axis in a chain via regular CSS3 transforms and the second tween skews the shape on X and Y axis via the <code class="bg-indigo">svgTransform</code> tween property. You will notice translation
kicking in to set the transform origin and the example also showcases the fact that chain transformations for SVGs via <code>transform</code> attribute works just as for the CSS3 transformations.</p>
<h4>SVG Scaling</h4>
<p>Another transform example for SVGs is the scale. Unlike translations, for scale animation the plugin only accepts single value like <code>scale: 1.5</code>, for both X (horizontal) axis and Y (vertical) axis, to keep it simple and even if
SVGs do support <code>scale(X,Y)</code>. But because the scaling on SVGs depends very much on the shape's position, the script will always try to adjust the translation to make the animation look as we would expect. A quick demo:</p>
<div class="featurettes">
<svg id="svgScale" class="example-box-model example-box" style="width:320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513">
<path class="bg-lime" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-olive" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
</svg>
<div class="example-buttons">
<a id="scaleBtn" class="btn btn-pink" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The first tween scales the shape at <code>scale: 1.5</code> via regular CSS3 transforms, and the second tween scales down the shape at <code>scale: 0.5</code> value via <code class="bg-indigo">svgTransform</code>. If you inspect the elements,
you will notice for the second shape translation is involved, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. A similar case as with the skews.</p>
<h4>SVG Mixed Transform Functions</h4>
<p>Our last transform example for SVGs is the mixed transformation. Just like for the other examples the plugin will try to adjust the rotation <code>transform-origin</code> to make it look as you would expect it from regular HTML elements. Let's
combine 3 functions at the same time and see what happens:</p>
<div class="featurettes">
<svg id="svgMixed" class="example-box-model example-box" style="width: 320px; overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1085 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<path class="bg-green" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
<path class="bg-indigo" transform="translate(580)" d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"></path>
</svg>
<div class="example-buttons">
<a id="mixedBtn" class="btn btn-teal" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Both shapes are scaled at <code>scale: 1.5</code>, translated to <code>translate: 250</code> and skewed at <code>skewX: -15</code>. If you inspect the elements, you will notice the second shape's translation is different from what we've set
in the tween object, and this is to keep <code>transform-origin</code> at an expected <i>50% 50%</i> value. This means that the plugin will also compensate rotation transform origin when skews are used, so that both CSS3 transform property
and SVG transform attribute have an identical animation.</p>
<h4>Chained SVG transforms</h4>
<p>The SVG Plugin does not work with SVG specific chained transform functions right away (do not confuse with tween chain), but if your SVGs only use this feature to set a custom <code>transform-origin</code>, it should look like this:</p>
<pre><code class="language-markup">&lt;svg>
&lt;circle transform="translate(150,150) rotate(45) scale(1.2) translate(-150,-150)" r="20">&lt;/circle>
&lt;/svg>
</code></pre>
<p>Well in this case I would recommend using the values of the first translation as <code>transform-origin</code> for your tween built with the <code>.fromTo()</code> method like so:</p>
<pre><code class="language-javascript">// a possible workaround for animating a SVG element that uses chained transform functions
KUTE.fromTo(element,
<p>Well in this case I would recommend using the values of the first translation as <code>transform-origin</code> for your tween built with the <code>.fromTo()</code> method like so:</p>
<pre><code class="language-javascript">// a possible workaround for animating a SVG element that uses chained transform functions
KUTE.fromTo(element,
{svgTransform : { translate: 0, rotate: 45, scale: 0.5 }}, // we asume the current translation is zero on both X &amp; Y axis
{svgTransform : { translate: 450, rotate: 0, scale: 1.5 }}, // we will translate the X to a 450 value and scale to 1.5
{transformOrigin: [256,256]} // tween options use the transform-origin of the target SVG element
).start();
</code></pre>
<p>Before you hit the <kbd>Start</kbd> button, make sure to check the <code>transform</code> attribute value.</p>
<div class="featurettes">
<svg id="svgChained" class="example-box-model example-box" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<path class="bg-blue"
<p>Before you hit the <kbd>Start</kbd> button, make sure to check the <code>transform</code> attribute value.</p>
<div class="featurettes">
<svg id="svgChained" class="example-box-model example-box" style="overflow: visible;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513" xmlns:xml="http://www.w3.org/XML/1998/namespace" xml:space="preserve" version="1.1">
<path class="bg-blue"
d="M426.671 0h-341.328c-46.937 0-85.343 38.405-85.343 85.345v341.311c0 46.969 38.406 85.344 85.343 85.344h341.328c46.938 0 85.329-38.375 85.329-85.345v-341.31c0-46.94-38.391-85.345-85.329-85.345z"
transform="translate(256,256) rotate(45) scale(0.5) translate(-256,-256)"></path>
transform="translate(256,256) rotate(45) scale(0.5) translate(-256,-256)"></path>
</svg>
<div class="example-buttons">
<a id="chainedBtn" class="btn btn-lime" href="javascript:void(0)">Start</a>
</div>
</div>
<p>This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system, just as the above example showcases.</p>
<h4>Recommendations for SVG Transforms</h4>
<ul>
<li>The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and <b>always uses same order of transform functions</b>: <code>translate</code>, <code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code> to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.</li>
<li>Keep in mind that the SVG transforms will use the center of a shape as transform origin by default, contrary to the SVG draft.</li>
<li>Keep in mind the adjustments required for rotations, remember the <code>.getBBox()</code> method, it's really useful to set custom <code>transform-origin</code>.</li>
<li>By default browsers use <code>overflow: hidden</code> for <code>&lt;svg></code> so child elements are partialy/completely hidden while animating. You might want to set <code>overflow: visible</code> or some browser specific tricks if that is the case.</li>
<li>When using <code>viewBox="0 0 500 500"</code> attribute for <code>&lt;svg></code> and no <code>width</code> and/or <code>height</code> attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply don't work. You might want to <a href="https://css-tricks.com/scale-svg/" target="_blank">check this tutorial</a>.</li>
<li>Similar to the CSS3 transform animation featured in the core engine, the <code class="bg-indigo">svgTransform</code> property DOES stack transform functions for chained tween objects created with the <code>.to()</code> method, you will have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all the properties and I highly recommend checking the example code for skews in the <a href="./assets/js/svg.js">svg.js</a> file.</li>
<li>In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the <code>.fromTo()</code> method with all proper values.</li>
<li>Also the <code class="bg-indigo">svgTransform</code> tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.</li>
<div class="example-buttons">
<a id="chainedBtn" class="btn btn-lime" href="javascript:void(0)">Start</a>
</div>
</div>
<p>This way we make sure to count the real current transform-origin and produce a consistent animation with the SVG coordinate system, just as the above example showcases.</p>
<h4>Recommendations for SVG Transforms</h4>
<ul>
<li>The SVG Plugin coming with KUTE.js version 1.6.0 is successfuly handling all possible combinations of transform functions, and <b>always uses same order of transform functions</b>: <code>translate</code>, <code>rotate</code>, <code>skewX</code>,
<code>skewY</code> and <code>scale</code> to keep animation consistent and with same aspect as for CSS3 transforms on non-SVG elements.</li>
<li>Keep in mind that the SVG transforms will use the center of a shape as transform origin by default, contrary to the SVG draft.</li>
<li>Keep in mind the adjustments required for rotations, remember the <code>.getBBox()</code> method, it's really useful to set custom <code>transform-origin</code>.</li>
<li>By default browsers use <code>overflow: hidden</code> for <code>&lt;svg></code> so child elements are partialy/completely hidden while animating. You might want to set <code>overflow: visible</code> or some browser specific tricks if that
is the case.</li>
<li>When using <code>viewBox="0 0 500 500"</code> attribute for <code>&lt;svg></code> and no <code>width</code> and/or <code>height</code> attribute(s), means that you expect the SVG to be scalable and most Internet Explorer versions simply
don't work. You might want to <a href="https://css-tricks.com/scale-svg/" target="_blank">check this tutorial</a>.</li>
<li>Similar to the CSS3 transform animation featured in the core engine, the <code class="bg-indigo">svgTransform</code> property DOES stack transform functions for chained tween objects created with the <code>.to()</code> method, you will
have to provide only values for the functions that will change and the plugin will try to keep the unchanged values. However, there's a catch: you need to follow all the properties and I highly recommend checking the example code for
skews in the <a href="./assets/js/svg.js">svg.js</a> file.</li>
<li>In other cases when you need maximum control and precision or when shapes are already affected by translation, you might want to use the <code>.fromTo()</code> method with all proper values.</li>
<li>Also the <code class="bg-indigo">svgTransform</code> tween property does not support 3D transforms, because they are not supported in all SVG enabled browsers.</li>
</ul>
<h3>SVG Plugin Tips</h3>
<ul>
<li>The SVG Plugin can be combined with the <a href="attr.html">Attributes Plugin</a> to enable even more advanced/complex animations for SVG elements.</li>
<li>Since SVG morph scripting works only with <code>path</code> or <code>glyph</code> elements, you might need a <code>convertToPath</code> feature, so <a href="https://github.com/Waest/SVGPathConverter" target="_blank">check this out</a>.</li>
</ul>
</div>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
<h3>SVG Plugin Tips</h3>
<ul>
<li>The SVG Plugin can be combined with the <a href="attr.html">Attributes Plugin</a> to enable even more advanced/complex animations for SVG elements.</li>
<li>Since SVG morph scripting works only with <code>path</code> or <code>glyph</code> elements, you might need a <code>convertToPath</code> feature, so <a href="https://github.com/Waest/SVGPathConverter" target="_blank">check this out</a>.</li>
</ul>
</div>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div><!-- /.site-wrapper -->
<!-- /.site-wrapper -->
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- some stuff -->
<script src="./src/kute-attr.min.js"></script> <!-- some stuff -->
<script src="./src/kute-svg.min.js"></script> <!-- some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/svg.js"></script> <!-- css plugin stuff -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script>
<!-- some stuff -->
<script src="./src/kute-attr.min.js"></script>
<!-- some stuff -->
<script src="./src/kute-svg.min.js"></script>
<!-- some stuff -->
<script src="./assets/js/scripts.js"></script>
<!-- global scripts stuff -->
<script src="./assets/js/svg.js"></script>
<!-- css plugin stuff -->
</body>
</html>
</html>

285
text.html
View file

@ -3,7 +3,9 @@
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
<!--[if gte IE 10 | !IE ]><!--> <html lang="en"> <!--<![endif]-->
<!--[if gte IE 10 | !IE ]><!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta charset="utf-8">
@ -12,164 +14,181 @@
<meta name="description" content="The Text Plugin for KUTE.js enables string manipulation.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,text plugin,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<link rel="shortcut icon" href="./assets/img/favicon.png">
<!-- TO DO -->
<title>KUTE.js Text Plugin | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<style>.text-example {margin: 0 0 20px; font-size: 28px} .red {color: red}</style>
<script src="./assets/js/minifill.js">
</script>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
<!-- legacy browsers support via polyfill, you must remove the above when used
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<style>
.text-example {
margin: 0 0 20px;
font-size: 28px
}
.red {
color: red
}
</style>
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li class="active"><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="fill overlay"></div>
<div class="content-wrap">
<h2>Text Plugin</h2>
<p>The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by character with a very cool effect.</p>
<div class="site-wrapper">
<pre><code class="language-javascript">// basic synthax for number increments
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li class="active"><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2>Text Plugin</h2>
<p>The KUTE.js Text Plugin extends the core engine and enables animation for text elements in two ways: either incrementing or decreasing a number in a given string or writing a string character by character with a very cool effect.</p>
<pre><code class="language-javascript">// basic synthax for number increments
var myNumberTween = KUTE.to('selector', {number: 1500}); // this assumes it will start from current number or from 0
// OR text writing character by character
var myTextTween = KUTE.to('selector', {text: 'A text string with other &lt;span&gt;substring&lt;/span&gt; should do.'});
</code></pre>
<p>The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is advised. With other words, try to limit the number of simultaneus text animations.</p>
<h3>Number Incrementing/Decreasing</h3>
<p>In the first example, let's animate a number, approximatelly as written above:</p>
<div class="featurettes">
<p class="text-example">Total number of lines: <span id="numText">0</span></p>
<div class="example-buttons">
<a id="numBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The button action will toggle the <code>valuesEnd</code> value for the <code>number</code> property, because tweening a number to itself would produce no effect.</p>
<h3>Writing Text</h3>
<p>This feature come with a additional tween option called <kbd>textChars</kbd> for the scrambling text character:</p>
<ul>
<li><code>alpha</code> use lowercase alphabetical characters, the default value</li>
<li><code>upper</code> use UPPERCASE alphabetical characters</li>
<li><code>numeric</code> use numerical characters</li>
<li><code>symbols</code> use symbols such as #, $, %, etc.</li>
<li><code>all</code> use all alpha numeric and symbols.</li>
<li><code>YOUR CUSTOM STRING</code> use your own custom characters; eg: <code>'KUTE.JS IS #AWESOME'</code>.</li>
</ul>
<div class="featurettes">
<p class="text-example" id="headText">Click the Start button on the right.</p>
<div class="example-buttons">
<a id="headBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Keep in mind that the <code>yoyo</code> feature will NOT un-write / delete character by character the string, but will write the previous text instead.</p>
<h3>Combining Both</h3>
<div class="featurettes">
<div class="columns">
<div class="col2" style="width: 80px">
<p class="text-example" id="comNum">0</p>
</div>
<div class="col2" style="text-align: left">
<p class="text-example" id="comText">Clicks so far?</p>
</div>
</div>
<div class="example-buttons">
<a id="comBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
</div>
</div>
<p>In this example we've used the <code>textChars</code> option with <code>symbols</code> and <code>all</code> values respectively, but combining the two text properties and some other KUTE.js features can really spice up some content. Have fun!</p>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<p>The effects of these two properties are very popular, but pay attention to the fact that every 16 miliseconds the browser has to parse the HTML structure around your target elements so caution is advised. With other words, try to limit the
number of simultaneus text animations.</p>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
<h3>Number Incrementing/Decreasing</h3>
<p>In the first example, let's animate a number, approximatelly as written above:</p>
<div class="featurettes">
<p class="text-example">Total number of lines: <span id="numText">0</span></p>
</div><!-- /.site-wrapper -->
<div class="example-buttons">
<a id="numBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The button action will toggle the <code>valuesEnd</code> value for the <code>number</code> property, because tweening a number to itself would produce no effect.</p>
<h3>Writing Text</h3>
<p>This feature come with a additional tween option called <kbd>textChars</kbd> for the scrambling text character:</p>
<ul>
<li><code>alpha</code> use lowercase alphabetical characters, the default value</li>
<li><code>upper</code> use UPPERCASE alphabetical characters</li>
<li><code>numeric</code> use numerical characters</li>
<li><code>symbols</code> use symbols such as #, $, %, etc.</li>
<li><code>all</code> use all alpha numeric and symbols.</li>
<li><code>YOUR CUSTOM STRING</code> use your own custom characters; eg: <code>'KUTE.JS IS #AWESOME'</code>.</li>
</ul>
<div class="featurettes">
<p class="text-example" id="headText">Click the Start button on the right.</p>
<div class="example-buttons">
<a id="headBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Keep in mind that the <code>yoyo</code> feature will NOT un-write / delete character by character the string, but will write the previous text instead.</p>
<h3>Combining Both</h3>
<div class="featurettes">
<div class="columns">
<div class="col2" style="width: 80px">
<p class="text-example" id="comNum">0</p>
</div>
<div class="col2" style="text-align: left">
<p class="text-example" id="comText">Clicks so far?</p>
</div>
</div>
<div class="example-buttons">
<a id="comBtn" class="btn btn-olive" href="javascript:void(0)">Start</a>
</div>
</div>
<p>In this example we've used the <code>textChars</code> option with <code>symbols</code> and <code>all</code> values respectively, but combining the two text properties and some other KUTE.js features can really spice up some content. Have fun!</p>
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div>
<!-- /.site-wrapper -->
<!-- JavaScript
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-text.min.js"></script> <!-- KUTE.js Text Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/text.js"></script> <!-- css plugin examples -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.min.js"></script>
<!-- KUTE.js core -->
<script src="./src/kute-text.min.js"></script>
<!-- KUTE.js Text Plugin -->
<script src="./assets/js/scripts.js"></script>
<!-- global scripts stuff -->
<script src="./assets/js/text.js"></script>
<!-- css plugin examples -->
</body>
</html>
</html>