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

The 1.5 first commit, still testing, changelog in the comments

Browse source
This commit is contained in:
thednp 2016-03-16 15:44:23 +02:00
parent ddb8212e4c
commit 71929b7fc7
30 changed files with 4798 additions and 2051 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
about.html
View file

@ -9,7 +9,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="KUTE.js is a minimal Javascript animation engine">
<meta name="description" content="About KUTE.js performance, project, code and a short glossary with most used terminology in Javascript animation.">
<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 -->
@ -24,7 +24,9 @@
<!-- 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>
</head>
<body>
@ -36,9 +38,30 @@
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li><a href="features.html">Features</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="api.html">API</a></li>
<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="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="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>
@ -47,7 +70,7 @@
<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 frames per second, etc). The term was introduced to the world of web development by early Javascrpt libraries and later used in dedicated animation libraries such as <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.</p>
<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 frames per second, etc). The term was introduced to the world of web development by early Javascrpt libraries and later used in dedicated animation libraries such as <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>
@ -68,12 +91,14 @@
<h2 id="performance">A Word 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.</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 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 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><span class="ion-android-plane media"></span>I would stress on this a bit: even faster performance for translation can be achieved by using an improved version of the tiny <a href="https://github.com/tweenjs/tween.js">tween.js</a>, as it only <em>tweens</em> the values and allows you to concatenate strings as you please. On large amounts of elements translating on vertical or horizontal axis, tween.js would be the <strong>best</strong> of them all, but well, we'll see about that in the <a href="performance.html">performance testing page</a>. </p>
<p>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, 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>. With other words the more pixels to recompose in the layout, the more time spent on each frame, and this is why translation is better in most cases, and animated positioning is best to be used as fallback animation for legacy browsers.</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>
@ -94,7 +119,7 @@
<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 And Repeat</h3>
<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>
@ -114,8 +139,8 @@
<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 <a href="https://github.com/thednp/jQueryTween" target="_blank">jQueryTween</a> 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 almost as good as the boss, <a href="https://greensock.com" target="_blank">GSAP</a>, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, a true inspiration for the entire developers' community, not to mention the huge contribution and knowledge sharing.</p>
<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 almost as good as the boss, <a href="https://greensock.com" target="_blank">GSAP</a>, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, and a very tough competitor.</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, 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>
@ -131,7 +156,7 @@
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2015 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
@ -142,6 +167,8 @@
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

249
api.html
View file

@ -9,7 +9,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="KUTE.js is a minimal Javascript animation engine">
<meta name="description" content="A detailed API documentation on KUTE.js main methods, options and easing functions.">
<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 -->
@ -28,6 +28,9 @@
<!-- 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]>
@ -46,52 +49,66 @@
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li><a href="features.html">Features</a></li>
<li><a href="examples.html">Examples</a></li>
<li class="active"><a href="api.html">API</a></li>
<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="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="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 detailed. 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>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.0.0/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<p>Also you can 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.0.0/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-easing.min.js">&lt;/script> &lt;!-- Bezier Easing Functions -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.0.0/kute-physics.min.js">&lt;/script> &lt;!-- Physics Easing Functions -->
</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>
</div>
<div class="content-wrap">
<h2>Main Methods</h2>
<p>These methods allow you to create <strong>tween objects</strong>; here a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation duration or repeat. The methods have different uses and performance scores while making it easy to work with.</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 next two because it has to compute the default/current value on tween <code>.start()</code> and thus delays the animation for a cuple of miliseconds, but this feature is great for simple animations AND it has the ability to stack transform properties as they go, making smooth transform animations on chained tweens. See the <a href="#start">.start()</a> method for the solution for sync/delay issue.</p>
<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 a single HTML element, 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><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 methods but unlike the <code>.to()</code> method, it does not stack transform properties on chained tweens. Also, another advantage is the fact that you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the <a href="features.html">features page</a>. So here's a quick example:</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>
<p><kbd>.Animate()</kbd> method is only a fallback for the older KUTE.js versions and works as the <code>.fromTo()</code> method. It will be deprecated with later versions.</p>
<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">
@ -101,21 +118,25 @@ $ bower install --save kute.js
<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.</p>
<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
// 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
// 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 that may occur</strong>, even if you are using the <code>.to()</code> method. This applies to our performance test page as well, and the trick is super duper simple:</p>
<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');
var tweens = [], myElements = document.querySelector('.myManyElements'), numberOfElements = myElements.length;
// step 2 - define tween objects for each element
for (var i = 0; i < numberOfElements; i++) {
@ -139,26 +160,27 @@ for (var i = 0; i < numberOfElements; i++) {
}
</code></pre>
<p>If you care to see the actual working code, check it in the <a href="./assets/js/perf.js" target="_blank">perf.js</a> file.</p>
<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 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">stopButton.addEventListener('click', function(){
tween.stop();
<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, 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>
<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();
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 only if it was paused or else will produce no effect.</p>
<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();
tween.play(); // or tween.resume(); || or myMultiTweens.resume();
}, false);
</code></pre>
@ -172,21 +194,39 @@ 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, but the one that finishes last (has longest delay and duration together) should be used last in the <code>.chain()</code> method arguments list. Why? Because when a tween is finished it triggers <code>cancelAnimationFrame()</code> and KUTE.js will stop "ticking" causing all other chained tweens to stop prematurelly.</p>
<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}, {opacity: 0});
// 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}, {opacity: 0});
// 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">
<h2>Tween Options</h2>
<h2 id="tweenoptions">Tween Options</h2>
<h3>Common Options</h3>
<p>These options affect all types of tweens, no matter the properties used or context.</p>
<p><kbd>duration: 500</kbd> option allows you to set the animation duration in miliseconds. The default value is <strong>700</strong>.</p>
<p><kbd>repeat: 20</kbd> option allows you to run the animation of given tween multiple times. The default value is <strong>0</strong>.</p>
<p><kbd>delay: 500</kbd> option allows you to schedule the tween animation after a certain number of miliseconds. The default value is <strong>0</strong>.</p>
<p><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>.</p>
<p><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>.</p>
<p><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>.</p>
<p><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>.</p>
<p><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>.</p>
@ -197,6 +237,16 @@ tween.chain(tween1,tween2);
<p><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.</p>
<p><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.</p>
<p><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.</p>
<p><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.</p>
<h3>SVG Options</h3>
<p>These options only affect animation of the <code>path</code> tween property, or what you know as SVG morphing.</p>
<p><kbd>showMorphInfo: true</kbd> when <code>true</code> the script will log valuable information about the morph in order to help you maximize both performance and visuals of the morph.</p>
<p><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.</p>
<p><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".</p>
<p><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape.</p>
<p><kbd>reverseSecondPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the SECOND shape.</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>
@ -219,92 +269,7 @@ KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
<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>
</div>
<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 one of them, and is the default set included with KUTE.js because it's the fastest set I know in terms of performance. Some functions may lack a bit of accuracy but they cover the most animation needs. Generally the easing functions' names are built with keywords that describe the type of easing, like <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 tak about. They are basically the same, the only difference is the number of multipliers applied (better think of it like the more weight an object has, the more acceleration):</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 grund 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>
<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: KUTE.Ease.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>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>
<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>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: KUTE.Physics.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: KUTE.Physics.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: KUTE.Physics.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: KUTE.Physics.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: KUTE.Physics.bezier({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 setting
easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] })
</code></pre>
</li>
</ul>
<p>The presets can be used both as a string <code>easing:'physicsIn'</code> or <code>easing:KUTE.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>
<div class="content-wrap">
<ul id="share" class="nav">
<li>Share </li>
@ -319,7 +284,7 @@ easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]}
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2015 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
@ -336,7 +301,7 @@ easing: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]}
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.0.0/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- some stuff -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

95
assets/css/kute.css
View file

@ -9,7 +9,7 @@ body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 2; /* ~25px */
color: #ddd;
color: #ccc;
background-color: #999;
position: relative
@ -56,11 +56,13 @@ footer p {margin: 0 0 10px}
.navbar-wrapper h1 span { font-size: 24px; color: #555; letter-spacing: -1px; }
.navbar-wrapper h1.active span { color: #ffd626 }
.navbar-wrapper .nav { float: left; padding: 0 0 18px; margin: 0; border-bottom: 1px solid #555 }
.nav li { float: left; display: block; line-height: 25px; list-style: none }
.nav li:not(:last-child) { margin-right: 12px }
.nav > li { float: left; display: block; line-height: 25px; list-style: none }
.nav > li:not(:last-child) { margin-right: 12px }
.ie8 .nav li { margin-right: 12px }
.nav li.active a { color: #ffd626 }
.ie8 .nav li li { margin-right: 0 }
.nav li.active > a { color: #ffd626 }
.nav li a { color: #ccc }
.nav li a:hover, .nav li a:focus { text-decoration: none }
@media (max-width: 768px){
.navbar-wrapper .content-wrap { height: 94px}
.navbar-wrapper h1 {border: 0}
@ -91,6 +93,13 @@ background: #222;
/* easy hack to improve box model properties performance on modern browsers only ofc */
transform: translate3d(0px,0px,0px); -webkit-transform: translate3d(0px,0px,0px);
}
.example-box-model {
font-size: 40px; text-align:center; font-weight: bold;
float: left; position:relative;
border-radius: 5px; margin: 0 20px 20px 0;
}
.easing-example {float: none; font-size: 24px; width: 320px}
.example-buttons {position: absolute; top: 18px; right:0}
/* text properties example */
@ -109,7 +118,7 @@ h1.example-item span {
.ie8 h1.example-item span,
.ie8 .btn.example-item {filter: alpha(opacity=0)}
/*.ie8 .btn.example-item * {filter: inherit}*/
.ie8 .btn.example-item * {filter: inherit}
/* UTILITY STYLES
-------------------------------------------------- */
@ -171,7 +180,7 @@ div { background-color: rgba(0,0,0,0.2) }*/
/* TYPO STYLES
-------------------------------------------------- */
p, ul, ol { margin: 0 0 20px }
h1, h2, h3, h4, strong {color: #ffd626}
h1, h2, h3, h4, strong {color: #fff}
h1 { font-size: 54px; letter-spacing:-3px; line-height: 0.92; font-weight: normal; }
h2 { font-size: 46px; letter-spacing:-2px; line-height: 1.08; font-weight: normal; margin: 1.08em 0 0.27em; width: 100%; }
h3 { font-size: 24px; letter-spacing:0px; line-height: 0.96; font-weight: normal; }
@ -258,24 +267,26 @@ hr {
}
/* share */
#share {position: fixed; top: 20px;right: 20px;}
#share {position: fixed; top: 0px; right: 0px; padding:10px 20px; background: #2e2e2e;}
#share .icon {font-size: 24px; line-height: 1}
/* buttons */
.btn { padding: 12px 15px; color:#fff; border:0; background-color: #999; line-height: 44px; }
.bg-gray { color:#fff; background-color: #555; }
.bg-gray { color:#fff; background-color: #555; fill: #555 }
.btn.active { background-color: #2196F3 }
.btn:hover, .btn:active, .btn:focus { color: #fff; text-decoration: none; background-color: #777}
.btn-olive, .bg-olive {background-color: #9C27B0; color: #fff} .btn-olive:hover, .btn-olive:active, .btn-olive:focus { background-color: #673AB7 }
.btn-indigo, .bg-indigo { background-color: #673AB7; color: #fff} .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus { background-color: #ffd626; color:#000 }
.btn-green, .bg-green { background-color: #4CAF50; color: #fff} .btn-green:hover, .btn-green:active, .btn-green:focus { background-color: #9C27B0 }
.btn-red, .bg-red { background-color: #e91b1f; color: #fff} .btn-red:hover, .btn-red:active, .btn-red:focus { background-color: #4CAF50 }
.btn-yellow, .bg-yellow { background-color: #ffd626; color:#000} .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus { background-color: #4CAF50; color: #000 }
.btn-blue, .bg-blue { background-color: #2196F3; color: #fff} .btn-blue:hover, .btn-blue:active, .btn-blue:focus { background-color: #e91b1f }
.btn-pink, .bg-pink { background-color: #E91E63; color: #fff} .btn-pink:hover, .btn-pink:active, .btn-pink:focus { background-color: #2196F3 }
.btn-orange, .bg-orange { background-color: #FF5722; color: #fff} .btn-orange:hover, .btn-orange:active, .btn-orange:focus { background-color: #4CAF50 }
.btn-lime, .bg-lime { background-color: #CDDC39; color: #000} .btn-lime:hover, .btn-lime:active, .btn-lime:focus { background-color: #e91b1f }
.btn-teal, .bg-teal { background-color: #009688; color: #fff} .btn-teal:hover, .btn-teal:active, .btn-teal:focus { background-color: #9C27B0 }
.btn-olive, .bg-olive {background-color: #9C27B0; color: #fff; fill: #9C27B0} .btn-olive:hover, .btn-olive:active, .btn-olive:focus { background-color: #673AB7 }
.btn-indigo, .bg-indigo { background-color: #673AB7; color: #fff; fill: #673AB7} .btn-indigo:hover, .btn-indigo:active, .btn-indigo:focus { background-color: #ffd626; color:#000 }
.btn-green, .bg-green { background-color: #4CAF50; color: #fff; fill: #4CAF50} .btn-green:hover, .btn-green:active, .btn-green:focus { background-color: #9C27B0 }
.btn-red, .bg-red { background-color: #e91b1f; color: #fff; fill: #e91b1f} .btn-red:hover, .btn-red:active, .btn-red:focus { background-color: #4CAF50 }
.btn-yellow, .bg-yellow { background-color: #ffd626; color:#000; fill: #ffd626} .btn-yellow:hover, .btn-yellow:active, .btn-yellow:focus { background-color: #4CAF50; color: #000 }
.btn-blue, .bg-blue { background-color: #2196F3; color: #fff; fill: #2196F3} .btn-blue:hover, .btn-blue:active, .btn-blue:focus { background-color: #e91b1f }
.btn-pink, .bg-pink { background-color: #E91E63; color: #fff; fill: #E91E63} .btn-pink:hover, .btn-pink:active, .btn-pink:focus { background-color: #2196F3 }
.btn-orange, .bg-orange { background-color: #FF5722; color: #fff; fill: #FF5722} .btn-orange:hover, .btn-orange:active, .btn-orange:focus { background-color: #4CAF50 }
.btn-lime, .bg-lime { background-color: #CDDC39; color: #000; fill: #CDDC39} .btn-lime:hover, .btn-lime:active, .btn-lime:focus { background-color: #e91b1f }
.btn-teal, .bg-teal { background-color: #009688; color: #fff; fill: #009688} .btn-teal:hover, .btn-teal:active, .btn-teal:focus { background-color: #9C27B0 }
.bg-light {background-color: #fff; color: #777; fill: #fff}
.icon-large { font-size: 78px; line-height: 0.64; text-shadow: 2px 2px 0 #FFF,3px 3px 0px #ccc;}
.icon-large.fa-cogs:before { color: #4CAF50 }
@ -290,6 +301,54 @@ hr {
.btn span.right { margin: 0 0 0 10px }
.btn span.left { margin: 0 10px 0 0 }
.btn-group { position: relative; display: inline-block }
.btn-group ul {
background: #555; max-height: 300px; width: 200px;
position: absolute; bottom: -9999em; left: 0; list-style: none;
overflow: auto; padding: 0; z-index: 5
}
.btn-group ul li { padding: 5px 15px; cursor: pointer; display: block }
.btn-group ul.subnav li { padding: 0; }
.btn-group ul.subnav li > a { padding: 5px 15px; display: block }
.btn-group ul li.titlef { font-weight: bold; }
.btn-group ul li:hover {
background: #333;
}
.btn-group.open ul {
bottom: 26px;
}
.nav .btn-group ul {bottom: auto; top: -999em}
.nav .btn-group.open ul {
top: 43px;
}
/* Style the scrolBar for modern browsers */
.btn-group ul::-webkit-scrollbar {
width: 7px;
}
.btn-group ul::-webkit-scrollbar-thumb {
-webkit-border-radius: 3px;
border-radius: 3px;
background: rgba(92,92,92,0.8);
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
}
.btn-group ul::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,255,255,0.4);
}
/* caret */
.caret {
display: inline-block;
width: 0;
height: 0;
margin-left: 2px;
vertical-align: middle;
border-top: 4px dashed;
border-top: 4px solid\9;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
}
/* STYLE CODE WRAPPING
-------------------------------------------------- */

30
assets/js/attr.js Normal file
View file

@ -0,0 +1,30 @@
// radius attribute
var radiusTween = KUTE.to('#circle', {attr: {r: 75} }, {repeat:1, yoyo: true, easing: 'easingCubicOut'});
// coordinates of the circle center
var coordinatesTween1 = KUTE.to('#circle', {attr: {cx:40,cy:40}}, { duration: 300, easing: 'easingCubicOut'});
var coordinatesTween2 = KUTE.to('#circle', {attr: {cx:110,cy:40}}, { duration: 400, easing: 'linear'});
var coordinatesTween3 = KUTE.to('#circle', {attr: {cx:75,cy:75}}, { easing: 'easingCubicOut'});
coordinatesTween1.chain(coordinatesTween2);
coordinatesTween2.chain(coordinatesTween3);
coordinatesTween3.chain(radiusTween);
var circleBtn = document.getElementById('circleBtn');
circleBtn.addEventListener('click', function(){
!coordinatesTween1.playing && !coordinatesTween2.playing && !coordinatesTween3.playing && !radiusTween.playing && coordinatesTween1.start();
});
// coordinatea of gradient
var gradBtn = document.getElementById('gradBtn');
var closingGradient = KUTE.to('#gradient',{attr: {x1:'49%', x2:'49%', y1:'49%', y2:'51%'}}, {easing: 'easingCubicInOut'});
var rotatingGradient1 = KUTE.to('#gradient',{attr: {x1:'49%', x2:'51%', y1:'51%', y2:'51%'}}, {easing: 'easingCubicInOut'});
var rotatingGradient2 = KUTE.to('#gradient',{attr: {x1:'0%', x2:'51%', y1:'100%', y2:'0%'}}, {easing: 'easingCubicInOut'});
var openingGradient = KUTE.to('#gradient',{attr: {x1:'0%', x2:'0%', y1:'0%', y2:'100%'}}, {duration: 1500, easing: 'easingCubicInOut'});
closingGradient.chain(rotatingGradient1);
rotatingGradient1.chain(rotatingGradient2);
rotatingGradient2.chain(openingGradient);
gradBtn.addEventListener('click', function(){
!closingGradient.playing && !rotatingGradient1.playing && !rotatingGradient2.playing && !openingGradient.playing && closingGradient.start();
});

164
assets/js/css.js Normal file
View file

@ -0,0 +1,164 @@
// some regular checking
var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
isIE8 = isIE === 8,
isIE9 = isIE === 9;
/* RADIUS EXAMPLES */
var radiusBtn = document.getElementById('radiusBtn');
var allRadius = KUTE.to('#allRadius',{borderRadius:80},{easing:'easingCubicOut', repeat: 1, yoyo: true});
var tlRadius = KUTE.to('#tlRadius',{borderTopLeftRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
var trRadius = KUTE.to('#trRadius',{borderTopRightRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
var blRadius = KUTE.to('#blRadius',{borderBottomLeftRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
var brRadius = KUTE.to('#brRadius',{borderBottomRightRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
radiusBtn.addEventListener('click',function(){
if (!allRadius.playing) { allRadius.start(); tlRadius.start(); trRadius.start(); blRadius.start(); brRadius.start(); }
}, false);
/* RADIUS EXAMPLES */
/* BOX MODEL EXAMPLE */
var boxModel = document.getElementById('boxModel'),
btb = boxModel.querySelector('.btn'),
box = boxModel.querySelector('.example-box-model');
// built the tween objects
var bm1 = KUTE.to(box,{marginTop:50},{ yoyo: true, repeat: 1, duration: 1500, update: onMarginTop});
var bm2 = KUTE.to(box,{marginBottom:50},{ yoyo: true, repeat: 1, duration: 1500, update: onMarginBottom});
var bm3 = KUTE.to(box,{padding:30},{ yoyo: true, repeat: 1, duration: 1500, update: onPadding});
var bm4 = KUTE.to(box,{marginTop:50,marginLeft:50,marginBottom:70},{ yoyo: true, repeat: 1, duration: 1500, update: onMargin, complete: onComplete});
// chain the bms
bm1.chain(bm2);
bm2.chain(bm3);
bm3.chain(bm4);
//callback functions
function onMarginTop() { var css = KUTE.gCS(box,'marginTop'); box.innerHTML = parseInt(css)+'px'+'<br>MARGIN'; }
function onMarginBottom() { var css = KUTE.gCS(box,'marginBottom'); box.innerHTML = 'MARGIN<br>'+parseInt(css)+'px'; }
function onPadding() { var css = KUTE.gCS(box,'paddingTop'); box.innerHTML = 'PADDING<br>'+parseInt(css)+'px'; }
function onMargin() { var css = KUTE.gCS(box,'marginTop'); box.innerHTML = 'MARGIN<br>'+parseInt(css)+'px'; }
function onComplete() { box.innerHTML = 'BOX<br>&nbsp;MODEL&nbsp;'; }
btb.addEventListener('click', function(e){
e.preventDefault();
!bm1.playing && !bm2.playing && !bm3.playing && !bm4.playing && bm1.start();
},false);
/* BOX MODEL EXAMPLE */
/* TEXT PROPERTIES EXAMPLE */
var textProperties = document.getElementById('textProperties'),
heading = textProperties.querySelector('h1'),
button = textProperties.querySelectorAll('.btn')[0],
tbt = textProperties.querySelectorAll('.btn')[1],
// let's split the heading text by character
chars = heading.innerHTML.split('');
// wrap the splits into spans and build an object with these spans
heading.innerHTML = '<span>' + chars.join('</span><span>') + '</span>';
var charsObject = heading.getElementsByTagName('SPAN'), l = charsObject.length;
// built the tween objects
var tp1 = KUTE.fromTo(
button,
{width: 150, opacity:0, height: 70, lineHeight:70, fontSize: 40},
{width: 100, opacity:1, height: 35, lineHeight:35, fontSize: 20}),
tps = [];
for (var i=0; i<l; i++){
var fn = i === l-1 ? startButtonAnimation : null,
delay = 250*i;
tps.push(KUTE.fromTo(charsObject[i],
{opacity:0, height: 50, fontSize:80, letterSpacing: 20},
{opacity:1, height: 35, fontSize:50, letterSpacing: 0},
{complete: fn, delay: delay, duration: 500, easing: 'easingCubicOut'}
))
}
function startButtonAnimation(){
tp1.start();
}
function runHeadingAnimation() {
for (var i=0; i<l; i++){
tps[i].start();
}
}
tbt.addEventListener('click', function(e){
e.preventDefault();
if (!tp1.playing && !tps[0].playing && !tps[l-1].playing) {
for (var i=0;i<l; i++) {
charsObject[i].style.opacity ="";
if (isIE8) charsObject[i].style.filter ="";
}
button.style.opacity = '';
if (isIE8) button.style.filter ="";
runHeadingAnimation();
}
},false);
/* TEXT PROPERTIES EXAMPLE */
/* COLORS EXAMPLE */
var colBox = document.getElementById('colBox'),
colBoxElement = colBox.querySelector('.example-box'),
colbtn = colBox.querySelector('.btn');
var colTween1 = KUTE.to(colBoxElement, {borderColor: '#069'}, {duration: 1000});
var colTween2 = KUTE.to(colBoxElement, {borderTopColor: '#9C27B0'}, {duration: 1000});
var colTween3 = KUTE.to(colBoxElement, {borderRightColor: '#9C27B0'}, {duration: 1000});
var colTween4 = KUTE.to(colBoxElement, {borderBottomColor: '#9C27B0'}, {duration: 1000});
var colTween5 = KUTE.to(colBoxElement, {borderLeftColor: '#9C27B0'}, {duration: 1000});
colTween1.chain(colTween2);
colTween2.chain(colTween3);
colTween3.chain(colTween4);
colTween4.chain(colTween5);
colbtn.addEventListener('click', function(e){
e.preventDefault();
!colTween1.playing && !colTween2.playing && !colTween3.playing && !colTween4.playing && !colTween5.playing && colTween1.start();
},false);
/* COLORS EXAMPLE */
/* CLIP EXAMPLE */
var clipExample = document.getElementById('clip'),
clipElement = clipExample.querySelector('.example-box'),
clpbtn = clipExample.querySelector('.btn');
var clp1 = KUTE.to(clipElement, {clip: [0,20,150,0]}, {duration:500, easing: 'easingCubicOut'});
var clp2 = KUTE.to(clipElement, {clip: [0,150,150,130]}, {duration:600, easing: 'easingCubicOut'});
var clp3 = KUTE.to(clipElement, {clip: [0,150,20,0]}, {duration:800, easing: 'easingCubicOut'});
var clp4 = KUTE.to(clipElement, {clip: [0,150,150,0]}, {duration:1200, easing: 'easingExponentialInOut'});
//chain some clps
clp1.chain(clp2);
clp2.chain(clp3);
clp3.chain(clp4);
clpbtn.addEventListener('click', function(e){
e.preventDefault();
!clp1.playing && !clp2.playing && !clp3.playing && !clp4.playing && clp1.start();
},false);
/* CLIP EXAMPLE */
/* BACKGROUND POSITION EXAMPLE */
var bgPos = document.getElementById('bgPos'),
bgBox = bgPos.querySelector('.example-box'),
bgb = bgPos.querySelector('.btn'),
bpTween1 = KUTE.to(bgBox, {backgroundPosition: ['0%','50%']}, { yoyo: true, repeat: 1, duration: 1500, easing: 'easingCubicOut'});
bgb.addEventListener('click', function(e){
e.preventDefault();
!bpTween1.playing && bpTween1.start();
},false);
/* BACKGROUND POSITION EXAMPLE */

313
assets/js/examples.js
View file

@ -2,87 +2,73 @@
var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) != null) ? parseFloat( RegExp.$1 ) : false,
isIE8 = isIE === 8,
isIE9 = isIE === 9;
/* TRANSFORMS EXAMPLES */
var featurettes = document.querySelectorAll('.featurettes'), fl = featurettes.length;
var translateExamples = document.getElementById('translate-examples'),
translateBtn = translateExamples.querySelector('.btn'),
tr2d = translateExamples.getElementsByTagName('div')[0],
trx = translateExamples.getElementsByTagName('div')[1],
trry = translateExamples.getElementsByTagName('div')[2],
trz = translateExamples.getElementsByTagName('div')[3],
tr2dTween = KUTE.to(tr2d, {translate:170}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
trxTween = KUTE.to(trx, {translateX:-170}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
trryTween = KUTE.to(trry, {translate3d:[0,170,0]}, {easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500}),
trzTween = KUTE.to(trz, {translate3d:[0,0,-100]}, {perspective:200, easing:'easingCubicOut', yoyo:true, repeat: 1, duration:1500});
translateBtn.addEventListener('click', function(){
!tr2dTween.playing && tr2dTween.start();
!trxTween.playing && trxTween.start();
!trryTween.playing && trryTween.start();
!trzTween.playing && trzTween.start();
}, false);
for ( var i=0; i<fl; i++){
var example = featurettes[i];
if ( example.querySelector('[data-]') !== undefined ) {
var items = example.querySelectorAll('.example-item'), bl = items.length, tweens = [];
for (var j=0;j<bl;j++) {
var data = processData(items[j]),
pp = data.options.perspective,
ppp = data.options.parentPerspective,
to = data.properties, fr = getFrom(data.properties,items[j]),
tween1 = KUTE.fromTo(items[j], fr, to, {easing: 'easingCubicInOut', yoyo: true, repeat: 1, duration: 1500, perspective: pp, parentPerspective: ppp} );
tweens.push(tween1);
}
addListener(example,tweens);
}
}
var rotExamples = document.getElementById('rotExamples'),
rotBtn = rotExamples.querySelector('.btn'),
r2d = rotExamples.querySelectorAll('div')[0],
rx = rotExamples.querySelectorAll('div')[1],
ry = rotExamples.querySelectorAll('div')[2],
rz = rotExamples.querySelectorAll('div')[3],
r2dTween = KUTE.to(r2d, {rotate:-720}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500}),
rxTween = KUTE.to(rx, {rotateX:180}, {easing:'linear', yoyo:true, repeat: 1, duration:1500}),
ryTween = KUTE.to(ry, {rotateY:-180,scale:1.5}, {perspective:200, easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
rzTween = KUTE.to(rz, {rotateZ:360}, {easing:'easingBounceOut', yoyo:true, repeat: 1, duration:1500});
rotBtn.addEventListener('click', function(){
!r2dTween.playing && r2dTween.start();
!rxTween.playing && rxTween.start();
!ryTween.playing && ryTween.start();
!rzTween.playing && rzTween.start();
}, false);
var skewExamples = document.getElementById('skewExamples'),
skewBtn = skewExamples.querySelector('.btn'),
sx = skewExamples.querySelectorAll('div')[0],
sy = skewExamples.querySelectorAll('div')[1],
sxTween = KUTE.to(sx, {skewX:-25}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500}),
syTween = KUTE.to(sy, {skewY:25}, {easing:'easingCircularInOut', yoyo:true, repeat: 1, duration:1500});
skewBtn.addEventListener('click', function(){
!sxTween.playing && sxTween.start();
!syTween.playing && syTween.start();
}, false);
var mixTransforms = document.getElementById('mixTransforms'),
skewBtn = mixTransforms.querySelector('.btn'),
mt1 = mixTransforms.querySelectorAll('div')[0],
mt2 = mixTransforms.querySelectorAll('div')[1],
pp = KUTE.property('perspective'),
tfp = KUTE.property('transform'),
tfo = KUTE.property('transformOrigin'),
mt1Tween = KUTE.to(mt1, {translateX:200,rotateX:360,rotateY:15,rotateZ:5}, { perspective:400, easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500}),
mt2Tween = KUTE.to(mt2, {translateX:-200,rotateX:360,rotateY:15,rotateZ:5}, { easing:'easingCubicInOut', yoyo:true, repeat: 1, duration:1500});
mt1.style[tfo] = '50% 50% 50px'; mt1.style[tfp] = 'perspective(400px) translateX(0px) rotateX(0deg) rotateY(0deg) rotateZ(0deg)';
mt2.style[tfo] = '50% 50% 50px'; mt2.parentNode.style[pp] = '400px';
skewBtn.addEventListener('click', function(){
!mt1Tween.playing && mt1Tween.start();
!mt2Tween.playing && mt2Tween.start();
}, false);
function addListener(example,tweens){
example.querySelector('.btn').addEventListener('click',function(e){
e.preventDefault();
for (var i=0;i<tweens.length;i++) {
tweens[i].start();
}
},false);
}
function getFrom(to,el) {
var start = {}, css = window.getComputedStyle(el);
for (var p in to) {
if (p==='translate3d') {
start[p] = [0,0,0];
} else if (p==='color' || p==='backgroundColor' || p==='border-color') {
start[p] = css[p] || 'rgba(0,0,0,0)';
} else if ( p === 'backgroundPosition' ){
start[p] = [50,50];
} else if ( p === 'clip' ){
start[p] = css[p] || [0,0,0,0];
} else if ( p === 'borderRadius' ){
start[p] = '5px';
} else if ( p === 'scale' || p === 'opacity' ){
start[p] = 1;
} else {
start[p] = css[p] || 0;
}
}
return start;
}
//make a sort of data-api animation
function processData(el){
var options = {}, properties = {}, l=0, attr=el.attributes;
for (l;l<attr.length;l++){
if (/^data-/.test(attr[l].nodeName)) {
if (/option/.test(attr[l].nodeName)) {
var op = attr[l].nodeName.replace('data-option-','').replace(/\s/,'').split('-');
for (var i=0;i<op.length;i++) {
if (i>0 && op[i]!==undefined) {
op[i] = op[i].charAt(0).toUpperCase() + op[i].slice(1);
}
}
op = op.join('');
options[op] = attr[l].value;
} else if (/property/.test(attr[l].nodeName)) {
var pp = attr[l].nodeName.replace('data-property-','').replace(/\s/,'').split('-');
for (var j=0;j<pp.length;j++) {
if (j>0 && pp[j]!==undefined) {
pp[j] = pp[j].charAt(0).toUpperCase() + pp[j].slice(1);
}
}
pp = pp.join('');
properties[pp] = pp === 'translate3d' || pp === 'translate' ? attr[l].value.replace(/\[|\]/g,'').split(',') : attr[l].value;
}
}
}
return {options: options, properties: properties};
}
/* TRANSFORMS EXAMPLES */
@ -117,12 +103,13 @@ var tween32 = KUTE.to(el3,{translate3d:[200,20,0], rotateY: 15}, {perspective:10
var tween33 = KUTE.to(el3,{translate3d:[0,0,0], rotateX: 0, rotateY:0}, {perspective:100, duration: 2000});
// chain tweens
tween31.chain(tween32);
tween32.chain(tween33);
tween31.chain(tween32); tween32.chain(tween33);
ctb.addEventListener('click',function(e){
e.preventDefault();
tween11.start(); tween21.start(); tween31.start();
!tween11.playing && !tween12.playing && !tween13.playing && tween11.start();
!tween21.playing && !tween22.playing && !tween23.playing && tween21.start();
!tween31.playing && !tween32.playing && !tween33.playing && tween31.start();
},false);
/* CHAINED TWEENS EXAMPLE */
@ -136,82 +123,28 @@ var boxModel = document.getElementById('boxModel'),
var bm1 = KUTE.to(box,{width:250},{ yoyo: true, repeat: 1, duration: 1500, update: onWidth});
var bm2 = KUTE.to(box,{height:250},{ yoyo: true, repeat: 1, duration: 1500, update: onHeight});
var bm3 = KUTE.to(box,{left:250},{ yoyo: true, repeat: 1, duration: 1500, update: onLeft});
var bm4 = KUTE.to(box,{top:-250},{ yoyo: true, repeat: 1, duration: 1500, update: onTop});
var bm5 = KUTE.fromTo(box,{padding:0},{padding:20},{ yoyo: true, repeat: 1, duration: 1500, update: onPadding});
var bm6 = KUTE.to(box,{marginTop:50,marginLeft:50,marginBottom:70},{ yoyo: true, repeat: 1, duration: 1500, update: onMargin, complete: onComplete});
var bm4 = KUTE.to(box,{top:-250},{ yoyo: true, repeat: 1, duration: 1500, update: onTop, complete: onComplete});
// chain the bms
bm1.chain(bm2);
bm2.chain(bm3);
bm3.chain(bm4);
bm4.chain(bm5);
bm5.chain(bm6);
//callback functions
function onWidth() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'WIDTH<br>'+parseInt(css.width)+'px'; }
function onHeight() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'HEIGHT<br>'+parseInt(css.height)+'px'; }
function onLeft() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'LEFT<br>'+parseInt(css.left)+'px'; }
function onTop() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'TOP<br>'+parseInt(css.top)+'px'; }
function onPadding() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'PADDING<br>'+(parseInt(css.padding)+'px')||'auto'; }
function onMargin() { var css = box.currentStyle || window.getComputedStyle(box); box.innerHTML = 'MARGIN<br>'+parseInt(css.marginTop)+'px'; }
function onComplete() { box.innerHTML = 'BOX<br>MODEL'; btb.style.display='inline'; }
function onComplete() { box.innerHTML = 'BOX<br>MODEL'; }
btb.addEventListener('click', function(e){
e.preventDefault();
bm1.start();
btb.style.display='none';
!bm1.playing && !bm2.playing && !bm3.playing && !bm4.playing && bm1.start();
},false);
/* BOX MODEL EXAMPLE */
/* TEXT PROPERTIES EXAMPLE */
var textProperties = document.getElementById('textProperties'),
heading = textProperties.querySelector('h1'),
button = textProperties.querySelectorAll('.btn')[0],
tbt = textProperties.querySelectorAll('.btn')[1],
// let's split the heading text by character
chars = heading.innerHTML.split('');
// wrap the splits into spans and build an object with these spans
heading.innerHTML = '<span>' + chars.join('</span><span>') + '</span>';
var charsObject = heading.getElementsByTagName('SPAN'), l = charsObject.length;
// built the tween objects
var tp1 = KUTE.fromTo(
button,
{width: 150, opacity:0, height: 70, lineHeight:70, fontSize: 40},
{width: 100, opacity:1, height: 35, lineHeight:35, fontSize: 20});
function runHeadingAnimation() {
for (var i=0; i<l; i++){
var fn = i === l-1 ? startButtonAnimation : null,
delay = 250*i;
KUTE.fromTo(charsObject[i],
{opacity:0, height: 50, fontSize:80, letterSpacing: 20},
{opacity:1, height: 35, fontSize:50, letterSpacing: 0},
{complete: fn, delay: delay, duration: 500, easing: 'easingCubicOut'}
).start()
}
function startButtonAnimation(){
tp1.start();
}
}
tbt.addEventListener('click', function(e){
e.preventDefault();
for (var i=0;i<l; i++) {
charsObject[i].style.opacity ="";
}
button.style.opacity = '';
runHeadingAnimation();
},false);
/* TEXT PROPERTIES EXAMPLE */
/* COLORS EXAMPLE */
var colBox = document.getElementById('colBox'),
colBoxElement = colBox.querySelector('.example-box'),
@ -219,67 +152,20 @@ var colBox = document.getElementById('colBox'),
var colTween1 = KUTE.to(colBoxElement, {color: '#9C27B0'}, {duration: 1000});
var colTween2 = KUTE.to(colBoxElement, {backgroundColor: '#069'}, {duration: 1000});
var colTween3 = KUTE.to(colBoxElement, {borderColor: '#069'}, {duration: 1000});
var colTween4 = KUTE.to(colBoxElement, {color: '#fff'}, {duration: 1000});
var colTween5 = KUTE.to(colBoxElement, {borderTopColor: '#9C27B0'}, {duration: 1000});
var colTween6 = KUTE.to(colBoxElement, {borderRightColor: '#9C27B0'}, {duration: 1000});
var colTween7 = KUTE.to(colBoxElement, {borderBottomColor: '#9C27B0'}, {duration: 1000});
var colTween8 = KUTE.to(colBoxElement, {borderLeftColor: '#9C27B0'}, {duration: 1000});
var colTween9 = KUTE.to(colBoxElement, {backgroundColor: '#9C27B0'}, {duration: 1000});
var colTween3 = KUTE.to(colBoxElement, {color: '#fff'}, {duration: 1000});
var colTween4 = KUTE.to(colBoxElement, {backgroundColor: '#9C27B0'}, {duration: 1000});
colTween1.chain(colTween2);
colTween2.chain(colTween3);
colTween3.chain(colTween4);
colTween4.chain(colTween5);
colTween5.chain(colTween6);
colTween6.chain(colTween7);
colTween7.chain(colTween8);
colTween8.chain(colTween9);
colbtn.addEventListener('click', function(e){
e.preventDefault();
colTween1.start();
!colTween1.playing && !colTween2.playing && !colTween3.playing && !colTween4.playing && colTween1.start();
},false);
/* COLORS EXAMPLE */
/* CLIP EXAMPLE */
var clipExample = document.getElementById('clip'),
clipElement = clipExample.querySelector('.example-box'),
clpbtn = clipExample.querySelector('.btn');
var clp1 = KUTE.fromTo(clipElement, {clip: [0,150,150,0]}, {clip: [0,20,150,0]}, {duration:500, easing: 'easingCubicOut'});
var clp2 = KUTE.fromTo(clipElement, {clip: [0,20,150,0]}, {clip: [0,150,150,130]}, {duration:600, easing: 'easingCubicOut'});
var clp3 = KUTE.fromTo(clipElement, {clip: [0,150,150,130]}, {clip: [0,150,20,0]}, {duration:800, easing: 'easingCubicOut'});
var clp4 = KUTE.fromTo(clipElement, {clip: [0,150,20,0]}, {clip: [0,150,150,0]}, {duration:1200, easing: 'easingExponentialInOut'});
//chain some clps
clp1.chain(clp2);
clp2.chain(clp3);
clp3.chain(clp4);
clpbtn.addEventListener('click', function(e){
e.preventDefault();
clp1.start();
},false);
/* CLIP EXAMPLE */
/* BACKGROUND POSITION EXAMPLE */
var bgPos = document.getElementById('bgPos'),
bgBox = bgPos.querySelector('.example-box'),
bgb = bgPos.querySelector('.btn'),
bpTween1 = KUTE.fromTo(bgBox, {backgroundPosition: ['50%','50%']}, {backgroundPosition: ['0%','50%']}, { yoyo: true, repeat: 1, duration: 1500, easing: 'easingCubicOut'});
bgb.addEventListener('click', function(e){
e.preventDefault();
bpTween1.start();
},false);
/* BACKGROUND POSITION EXAMPLE */
/* CROSS BROWSER EXAMPLE */
// grab an HTML element to build a tween object for it
var element = document.getElementById("myElement");
@ -341,4 +227,59 @@ playPauseButton.addEventListener('click', function(e){
}
}, false);
/* CROSS BROWSER EXAMPLE */
/* CROSS BROWSER EXAMPLE */
/* MULTI TWEENS EXAMPLE */
var tweenMulti = KUTE.allFromTo('.example-multi',
{translate:[0,0], rotate: 0},
{translate:[0,-150], rotate: 360},
{transformOrigin: '10% 10%', offset: 300, duration: 1000, easing: 'easingCubicOut', repeat: 1, repeatDelay: 1000, yoyo: true}
);
function startMultiTween() {
!tweenMulti.tweens[0].playing && !tweenMulti.tweens[tweenMulti.tweens.length-1].playing && tweenMulti.start();
}
/* MULTI TWEENS EXAMPLE */
/* EASINGS EXAMPLE */
var esProp1 = isIE && isIE < 9 ? { left:0 } : { translate: 0},
esProp2 = isIE && isIE < 9 ? { left:250 } : { translate: 250},
tweenEasingElements = document.querySelectorAll('.easing-example'),
easings = document.getElementById('easings'),
startEasingTween = document.getElementById('startEasingTween'),
easingSelectButton = document.getElementById('easingSelectButton'),
tweenEasing1 = KUTE.fromTo(tweenEasingElements[0], esProp1, esProp2,
{ duration: 1000, easing: 'linear', repeat: 1, yoyo: true}),
tweenEasing2 = KUTE.fromTo(tweenEasingElements[1], esProp1, esProp2,
{ duration: 1000, easing: 'linear', repeat: 1, yoyo: true});
easings.addEventListener('click',function(e){
if (!e.target.className){
var es = e.target.innerHTML;
easingSelectButton.innerHTML = es;
tweenEasingElements[1].innerHTML = es;
if (es === 'gravity') {
tweenEasing2._e = KUTE.Physics.gravity({elasticity:200,bounciness:600});
} else if (es === 'forceWithGravity') {
tweenEasing2._e = KUTE.Physics.forceWithGravity({elasticity:100,bounciness:600});
} else if (es === 'spring') {
tweenEasing2._e = KUTE.Physics.spring({friction:100,frequency:600});
} else if (es === 'bounce') {
tweenEasing2._e = KUTE.Physics.bounce({friction:100,frequency:600});
} else if (es === 'bezier') {
tweenEasing2._e = KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
} else if (es === 'multiPointBezier') {
tweenEasing2._e = KUTE.Physics.bezier({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}]}] });
} else {
tweenEasing2._e = KUTE.pe(es);
}
}
},false);
startEasingTween.addEventListener('click', function(e) {
e.preventDefault();
!tweenEasing1.playing && tweenEasing1.start();
!tweenEasing2.playing && tweenEasing2.start();
}, false);
/* EASINGS EXAMPLE */

27
assets/js/extend.js Normal file
View file

@ -0,0 +1,27 @@
var boxShadow = document.getElementById('boxShadow'),
boxBtn = boxShadow.querySelector('.btn'),
boxElement = boxShadow.getElementsByTagName('div')[0];
// tween to a string value
var myBSTween1 = KUTE.to(boxElement, {boxShadow: '0px 0px 15px 10px #CDDC39'}, {duration:1000, easing: 'easingCubicInOut'});
// or a fromTo with string and array, hex and rgb
var myBSTween2 = KUTE.fromTo(boxElement, {boxShadow: [0, 0, 15, 10, '#CDDC39']}, {boxShadow: '0px 0px 25px 25px rgb(0,66,99)'}, { duration:2000, easing: 'easingCubicInOut'});
var myBSTween3 = KUTE.to(boxElement, {boxShadow: '15px 15px 0px 0px rgb(0,66,99)'}, {duration:2000, easing: 'easingCubicInOut'});
var myBSTween4 = KUTE.to(boxElement, {boxShadow: '-15px 15px 0px 10px #E91E63'}, {duration:2000, easing: 'easingCubicInOut'});
var myBSTween5 = KUTE.to(boxElement, {boxShadow: '0px 0px 0px 0px rgb(0,0,0)'}, {duration:2000, easing: 'easingCubicInOut'});
var myBSTween6 = KUTE.to(boxElement, {boxShadow: [5, 5, 5, '#99A52A', 'inset']}, {duration:2000, easing: 'easingCubicInOut', repeat: 1, yoyo: true, complete: removeInset});
myBSTween1.chain(myBSTween2);
myBSTween2.chain(myBSTween3);
myBSTween3.chain(myBSTween4);
myBSTween4.chain(myBSTween5);
myBSTween5.chain(myBSTween6);
function removeInset() {
boxElement.style.boxShadow = '0px 0px 0px 0px rgb(0,0,0)';
}
boxBtn.addEventListener('click', function(){
!myBSTween1.playing && !myBSTween2.playing && !myBSTween3.playing &&
!myBSTween4.playing && !myBSTween5.playing && !myBSTween6.playing && myBSTween1.start();
}, false);

116
assets/js/kute-bs.js Normal file
View file

@ -0,0 +1,116 @@
/* KUTE.js - The Light Tweening Engine
* package - Box Shadow Plugin
* desc - adds support for boxShadow property with an array of values [h-shadow, v-shadow, blur, spread, color, inset]
* examples
* var bShadowTween1 = KUTE.to('selector', {boxShadow: '1px 1px 1px #069'}); // accepting string value
* var bShadowTween2 = KUTE.to('selector', {boxShadow: [1, 1, 1, '#069', 'inset'] }); // accepting array value
* by dnp_theme
* Licensed under MIT-License
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
var KUTE = require("./kute.js");
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
factory(KUTE);
} else {
throw new Error("Box Shadow Plugin require KUTE.js.");
}
}( function (KUTE) {
'use strict';
// filter unsupported browsers
if (!('boxShadow' in document.body.style)) {return;}
// add a reference to KUTE object
var K = window.KUTE;
// the preffixed boxShadow property, mostly for legacy browsers
// maybe the browser is supporting the property with its vendor preffix
// box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
var _boxShadow = K.property('boxShadow'); // note we're using the KUTE.property() autopreffix utility
var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi; // a full RegEx for color strings
// for the .to() method, you need to prepareStart the boxShadow property
// which means you need to read the current computed value
K.prS['boxShadow'] = function(element,property,value){
var cssBoxShadow = K.gCS(element,'boxShadow');
return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
}
// the processProperty for boxShadow
// registers the K.dom['boxShadow'] function
// returns an array of 6 values with the following format
// [horizontal, vertical, blur, spread, color: {r:0,g:0,b:0}, inset]
K.pp['boxShadow'] = function(property,value,element){
if ( !('boxShadow' in K.dom) ) {
// the DOM update function for boxShadow registers here
// we only enqueue it if the boxShadow property is used to tween
K.dom['boxShadow'] = function(w,p,v) {
// let's start with the numbers | set unit | also determine inset
var numbers = [], unit = 'px', // the unit is always px
inset = w._vS[p][5] !== 'none' || w._vE[p][5] !== 'none' ? ' inset' : false;
for (var i=0; i<4; i++){
numbers.push( (w._vS[p][i] + (w._vE[p][i] - w._vS[p][i]) * v ) + unit);
}
// now we handle the color
var color, _color = {};
for (var c in w._vE[p][4]) {
_color[c] = parseInt(w._vS[p][4][c] + (w._vE[p][4][c] - w._vS[p][4][c]) * v )||0;
}
color = 'rgb(' + _color.r + ',' + _color.g + ',' + _color.b + ') ';
// the final piece of the puzzle, the DOM update
w._el.style[_boxShadow] = inset ? color + numbers.join(' ') + inset : color + numbers.join(' ');
};
}
// processProperty for boxShadow, builds basic structure with ready to tween values
if (typeof value === 'string'){
var color, inset = 'none';
// make sure to always have the inset last if possible
inset = /inset/.test(value) ? 'inset' : inset;
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"
color = value.match(colRegEx);
value = value.replace(color[0],'').split(' ').concat([color[0].replace(/\s/g,'')],[inset]);
value = K.processBoxShadowArray(value);
} else if (value instanceof Array){
value = K.processBoxShadowArray(value);
}
return value;
}
// utility function to process values accordingly
// numbers must be integers and color must be rgb object
K.processBoxShadowArray = function(shadow){
var newShadow, i;
if (shadow.length === 3) { // [h-shadow, v-shadow, color]
newShadow = [shadow[0], shadow[1], 0, 0, shadow[2], 'none'];
} 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'];
} else if (shadow.length === 6) { // ideal [h-shadow, v-shadow, blur, spread, color, inset]
newShadow = shadow;
}
// make sure the values are ready to tween
for (i=0;i<4;i++){
newShadow[i] = parseFloat(newShadow[i]);
}
// also the color must be a rgb object
newShadow[4] = K.truC(newShadow[4]);
return newShadow;
}
return this;
}));

195
assets/js/minifill.js
View file

@ -1,9 +1,19 @@
// 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(); }; }
@ -20,6 +30,7 @@ if(!Date.now){ Date.now = function now() { return new Date().getTime(); }; }
}
})();
// Array.prototype.indexOf
if (!Array.prototype.indexOf) {
Array.prototype.indexOf = function indexOf(searchElement) {
@ -160,53 +171,24 @@ if (!('getComputedStyle' in window)) {
})();
}
// requestAnimationFrame
if (!window.requestAnimationFrame) {
var lT = Date.now(); // lastTime
window.requestAnimationFrame = function (callback) {
'use strict';
if (typeof callback !== 'function') {
throw new TypeError(callback + 'is not a function');
}
var cT = Date.now(), // currentTime
dl = 16 + lT - cT; // delay
if (dl < 0) { dl = 0; }
lT = cT;
return setTimeout(function () {
lT = Date.now();
callback(window.performance.now());
}, dl);
};
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
// Event
if (!window.Event||!Window.prototype.Event) {
(function (){
window.Event = Window.prototype.Event = Document.prototype.Event = Element.prototype.Event = function Event(t, args) {
if (!t) { throw new Error('Not enough arguments'); } // t is event.type
var ev,
b = args && args.bubbles !== undefined ? args.bubbles : false,
c = args && args.cancelable !== undefined ? args.cancelable : false;
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 ) {
ev = document.createEvent('Event');
ev.initEvent(t, b, c);
event = document.createEvent('Event');
event.initEvent(type, bubbles, cancelable);
} else {
ev = document.createEventObject();
ev.type = t;
ev.bubbles = b;
ev.cancelable = c;
event = document.createEventObject();
event.type = type;
event.bubbles = bubbles;
event.cancelable = cancelable;
}
return ev;
return event;
};
})();
}
@ -214,13 +196,13 @@ if (!window.Event||!Window.prototype.Event) {
// CustomEvent
if (!('CustomEvent' in window) || !('CustomEvent' in Window.prototype)) {
(function(){
window.CustomEvent = Window.prototype.CustomEvent = Document.prototype.CustomEvent = Element.prototype.CustomEvent = function CustomEvent(type, args) {
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 ev = new Event(type, args);
ev.detail = args && args.detail || null;
return ev;
var event = new Event(type, eventInitDict);
event.detail = eventInitDict && eventInitDict.detail || null;
return event;
};
})()
@ -230,76 +212,83 @@ if (!('CustomEvent' in window) || !('CustomEvent' in Window.prototype)) {
if (!window.addEventListener||!Window.prototype.addEventListener) {
(function (){
window.addEventListener = Window.prototype.addEventListener = Document.prototype.addEventListener = Element.prototype.addEventListener = function addEventListener() {
var el = this, // element
t = arguments[0], // type
l = arguments[1]; // listener
var element = this,
type = arguments[0],
listener = arguments[1];
if (!el._events) { el._events = {}; }
if (!element._events) { element._events = {}; }
if (!el._events[t]) {
el._events[t] = function (e) {
var ls = el._events[e.type].list, evs = ls.slice(), i = -1, lg = evs.length, eE; // list | events | index | length | eventElement
e.preventDefault = function preventDefault() {
if (e.cancelable !== false) {
e.returnValue = false;
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;
}
};
e.stopPropagation = function stopPropagation() {
e.cancelBubble = true;
event.stopPropagation = function stopPropagation() {
event.cancelBubble = true;
};
e.stopImmediatePropagation = function stopImmediatePropagation() {
e.cancelBubble = true;
e.cancelImmediate = true;
event.stopImmediatePropagation = function stopImmediatePropagation() {
event.cancelBubble = true;
event.cancelImmediate = true;
};
e.currentTarget = el;
e.relatedTarget = e.fromElement || null;
e.target = e.target || e.srcElement || el;
e.timeStamp = new Date().getTime();
event.currentTarget = element;
event.relatedTarget = event.fromElement || null;
event.target = event.target || event.srcElement || element;
event.timeStamp = new Date().getTime();
if (e.clientX) {
e.pageX = e.clientX + document.documentElement.scrollLeft;
e.pageY = e.clientY + document.documentElement.scrollTop;
if (event.clientX) {
event.pageX = event.clientX + document.documentElement.scrollLeft;
event.pageY = event.clientY + document.documentElement.scrollTop;
}
while (++i < lg && !e.cancelImmediate) {
if (i in evs) {
eE = evs[i];
while (++index < length && !event.cancelImmediate) {
if (index in events) {
eventElement = events[index];
if (ls.indexOf(eE) !== -1 && typeof eE === 'function') {
eE.call(el, e);
if (list.indexOf(eventElement) !== -1 && typeof eventElement === 'function') {
eventElement.call(element, event);
}
}
}
};
el._events[t].list = [];
element._events[type].list = [];
if (el.attachEvent) {
el.attachEvent('on' + t, el._events[t]);
if (element.attachEvent) {
element.attachEvent('on' + type, element._events[type]);
}
}
el._events[t].list.push(l);
element._events[type].list.push(listener);
};
window.removeEventListener = Window.prototype.removeEventListener = Document.prototype.removeEventListener = Element.prototype.removeEventListener = function removeEventListener() {
var el = this, t = arguments[0], l = arguments[1], i; // element // type // listener // index
if (el._events && el._events[t] && el._events[t].list) {
i = el._events[t].list.indexOf(l);
var element = this,
type = arguments[0],
listener = arguments[1],
index;
if (i !== -1) {
el._events[t].list.splice(i, 1);
if (element._events && element._events[type] && element._events[type].list) {
index = element._events[type].list.indexOf(listener);
if (!el._events[t].list.length) {
if (el.detachEvent) {
el.detachEvent('on' + t, el._events[t]);
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 el._events[t];
delete element._events[type];
}
}
}
@ -310,47 +299,47 @@ if (!window.addEventListener||!Window.prototype.addEventListener) {
// 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(e) {
window.dispatchEvent = Window.prototype.dispatchEvent = Document.prototype.dispatchEvent = Element.prototype.dispatchEvent = function dispatchEvent(event) {
if (!arguments.length) {
throw new Error('Not enough arguments');
}
if (!e || typeof e.type !== 'string') {
if (!event || typeof event.type !== 'string') {
throw new Error('DOM Events Exception 0');
}
var el = this, t = e.type; // element | event type
var element = this, type = event.type;
try {
if (!e.bubbles) {
e.cancelBubble = true;
if (!event.bubbles) {
event.cancelBubble = true;
var cancelBubbleEvent = function (event) {
event.cancelBubble = true;
(el || window).detachEvent('on' + t, cancelBubbleEvent);
(element || window).detachEvent('on' + type, cancelBubbleEvent);
};
this.attachEvent('on' + t, cancelBubbleEvent);
this.attachEvent('on' + type, cancelBubbleEvent);
}
this.fireEvent('on' + t, e);
this.fireEvent('on' + type, event);
} catch (error) {
e.target = el;
event.target = element;
do {
e.currentTarget = el;
event.currentTarget = element;
if ('_events' in el && typeof el._events[t] === 'function') {
el._events[t].call(el, e);
if ('_events' in element && typeof element._events[type] === 'function') {
element._events[type].call(element, event);
}
if (typeof el['on' + t] === 'function') {
el['on' + t].call(el, e);
if (typeof element['on' + type] === 'function') {
element['on' + type].call(element, event);
}
el = el.nodeType === 9 ? el.parentWindow : el.parentNode;
} while (el && !e.cancelBubble);
element = element.nodeType === 9 ? element.parentWindow : element.parentNode;
} while (element && !event.cancelBubble);
}
return true;

94
assets/js/perf.js
View file

@ -1,5 +1,5 @@
//returns browser prefix
function getPrefix() {
function getPrefix() {
var div = document.createElement('div'), i = 0, pf = ['Moz', 'moz', 'Webkit', 'webkit', 'O', 'o', 'Ms', 'ms'], pl = pf.length,
s = ['MozTransform', 'mozTransform', 'WebkitTransform', 'webkitTransform', 'OTransform', 'oTransform', 'MsTransform', 'msTransform'];
@ -21,11 +21,11 @@ var prefix = getPrefix(), // prefix
var container = document.getElementById('container'),
easing = 'easingQuadraticInOut',
tweens = [];
function createTest(count, property, engine, repeat, hack) {
function createTest(count, property, engine, repeat) {
var update;
for (var i = 0; i < count; i++) {
var tween,
div = document.createElement('div'),
var div = document.createElement('div'),
windowHeight = document.documentElement.clientHeight - 10,
left = random(-200, 200),
toLeft = random(-200, 200),
@ -40,7 +40,6 @@ function createTest(count, property, engine, repeat, hack) {
if (property==='left') {
div.style.left = left + 'px';
if (hack) { div.className += ' hack'; }
fromValues = engine==="tween" ? { left: left, div: div } : { left: left };
toValues = { left: toLeft }
} else {
@ -58,35 +57,23 @@ function createTest(count, property, engine, repeat, hack) {
// perf test
if (engine==='kute') {
tween = KUTE.fromTo(div, fromValues, toValues, { delay: 100, easing: easing, repeat: repeat, yoyo: true, duration: 1000, complete: fn });
tweens.push(tween);
tweens.push(KUTE.fromTo(div, fromValues, toValues, { delay: 100, easing: easing, repeat: repeat, yoyo: true, duration: 1000, complete: fn }));
} else if (engine==='gsap') {
if (property==="left"){
tween = TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
TweenMax.fromTo(div, 1, fromValues, {left : toValues.left, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
} else {
tween = TweenMax.fromTo(div, 1, fromValues, { x:toValues.x, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
TweenMax.fromTo(div, 1, fromValues, { x:toValues.x, repeat : repeat, yoyo : true, ease : Quad.easeInOut, onComplete: fn });
}
} else if (engine==='tween') {
var update;
if (property==="left"){
update = function(){
this.div.style['left'] = this.left+'px';
}
update = updateLeft;
} else if (property==="translateX"){
update = function(){
this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)';
}
update = updateTranslate;
}
tween = new TWEEN.Tween(fromValues)
.to(toValues,1000)
.easing( TWEEN.Easing.Quadratic.InOut )
.onComplete( complete )
.onUpdate( update)
.repeat(repeat)
.yoyo(true);
tweens.push(tween);
tweens.push(new TWEEN.Tween(fromValues).to(toValues,1000).easing( TWEEN.Easing.Quadratic.InOut ).onComplete( complete ).onUpdate( update).repeat(repeat).yoyo(true));
}
}
if (engine==='tween') {
@ -95,14 +82,6 @@ function createTest(count, property, engine, repeat, hack) {
requestAnimationFrame( animate );
TWEEN.update( time );
}
}
// since our engines don't do sync, we make it our own here
if (engine==='tween'||engine==='kute') {
var now = window.performance.now();
for (var t =0; t<count; t++){
tweens[t].start(now+count/16)
}
}
}
@ -112,6 +91,15 @@ function complete(){
tweens = [];
}
function updateLeft(){
this.div.style['left'] = this.left+'px';
}
function updateTranslate(){
this.div.style[transformProperty] = 'translate3d('+this.x + 'px,0px,0px)';
}
//some button toggle
var btnGroups = document.querySelectorAll('.btn-group'), l = btnGroups.length;
@ -122,45 +110,36 @@ for (var i=0; i<l; i++) {
var link = this, b = link.parentNode.parentNode.parentNode.querySelector('.btn');
b.innerHTML = link.id.toUpperCase() + ' <span class="caret"></span>';
b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id,link.id);
if ( /LEFT/.test(document.getElementById('property').querySelector('.btn').innerHTML) ) {
document.getElementById('hack').style.display = 'block';
} else {
document.getElementById('hack').style.display = 'none';
}
}
}
}
document.getElementById('hack').querySelector('.btn').onclick = function(){
var self= this;
setTimeout(function(){
if ( !self.querySelector('INPUT').checked ) {
self.className = self.className.replace('btn-info','btn-warning');
self.querySelector('.state').innerHTML = 'Hack ON';
} else if ( self.querySelector('INPUT').checked ) {
self.className = self.className.replace('btn-warning','btn-info');
self.querySelector('.state').innerHTML = 'Hack OFF';
}
},200)
}
// the start button handle
document.getElementById('start').onclick = function(){
document.getElementById('start').addEventListener('click', buildObjects, false);
function buildObjects(){
var c = document.querySelector('[data-count]'), e = document.querySelector('[data-engine]'), r = document.querySelector('[data-repeat]'),
p = document.querySelector('[data-property]'), ct = c && document.querySelector('[data-count]').getAttribute('data-count'),
count = ct ? parseInt(ct) : null,
engine = e && document.querySelector('[data-engine]').getAttribute('data-engine') || null,
repeat = r && document.querySelector('[data-repeat]').getAttribute('data-repeat') || null,
property = p && document.querySelector('[data-property]').getAttribute('data-property') || null,
hack = document.getElementById('hack').getElementsByTagName('INPUT')[0].getAttribute('checked') ? true : false,
warning = document.createElement('DIV');
warning.className = 'text-warning padding lead';
container.innerHTML = '';
if (count && engine && property && repeat) {
document.getElementById('info').style.display = 'none';
if (engine === 'gsap') {
document.getElementById('info').style.display = 'none';
}
createTest(count,property,engine,repeat,hack);
createTest(count,property,engine,repeat);
// since our engines don't do sync, we make it our own here
if (engine==='tween'||engine==='kute') {
document.getElementById('info').style.display = 'none';
start();
}
} else {
if (!count && !property && !repeat && !engine){
@ -175,4 +154,11 @@ document.getElementById('start').onclick = function(){
container.appendChild(warning);
}
}
function start() {
var now = window.performance.now(), count = tweens.length;
for (var t =0; t<count; t++){
tweens[t].start(now+count/16)
}
}

46
assets/js/scripts.js
View file

@ -1,14 +1,52 @@
// common demo JS
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');
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();
KUTE.to( 'window', { scroll: 0 }, {easing: 'easingQuarticOut', duration : 1500 } ).start();
}
toTopTween.start();
}
// 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');
}
}
document.addEventListener('click', function(e){
for (var i = 0, l = toggles.length; i< l; i ++ ){
if (toggles[i]!==e.target) closeToggles(toggles[i]);
}
}, false);

108
assets/js/svg.js Normal file
View file

@ -0,0 +1,108 @@
// basic morph
var morphTween = KUTE.to('#rectangle', { path: '#star' }, {
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
});
var morphBtn = document.getElementById('morphBtn');
morphBtn.addEventListener('click', function(){
!morphTween.playing && morphTween.start();
}, false);
var morphTween1 = KUTE.to('#rectangle1', { path: '#star1' }, {
showMorphInfo: true, morphIndex: 79,
duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'
});
var morphBtn1 = document.getElementById('morphBtn1');
morphBtn1.addEventListener('click', function(){
!morphTween1.playing && morphTween1.start();
}, false);
// simple multi morph
var multiMorphBtn = document.getElementById('multiMorphBtn');
var multiMorph1 = KUTE.to('#w11', { path: '#w24', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 17, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var multiMorph2 = KUTE.to('#w13', { path: '#w21', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 13, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var multiMorph3 = KUTE.to('#w14', { path: '#w22', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 76, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var multiMorph4 = KUTE.to('#w12', { path: '#w23', fill: "#56C5FF" }, { morphPrecision: 10, morphIndex: 35, reverseSecondPath: true, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
multiMorphBtn.addEventListener('click', function(){
!multiMorph1.playing && multiMorph1.start();
!multiMorph2.playing && multiMorph2.start();
!multiMorph3.playing && multiMorph3.start();
!multiMorph4.playing && multiMorph4.start();
}, false);
// complex multi morph
var compliMorphBtn = document.getElementById('compliMorphBtn');
var compliMorph1 = KUTE.to('#rectangle-container', { path: '#circle-container', fill: "#FF5722" }, { morphPrecision: 10, morphIndex: 161, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph2 = KUTE.to('#symbol-left', { path: '#eye-left', fill: "#fff" }, { morphPrecision: 10, morphIndex: 20, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph3 = KUTE.to('#symbol-left-clone', { path: '#mouth', fill: "#fff" }, { morphPrecision: 10, morphIndex: 8, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
var compliMorph4 = KUTE.to('#symbol-right', { path: '#eye-right', fill: "#fff" }, { morphPrecision: 10, morphIndex: 55, duration: 2000, repeat: 1, yoyo: true, easing: 'easingCubicOut'});
compliMorphBtn.addEventListener('click', function(){
!compliMorph1.playing && compliMorph1.start();
!compliMorph2.playing && compliMorph2.start();
!compliMorph3.playing && compliMorph3.start();
!compliMorph4.playing && compliMorph4.start();
}, false);
// draw example
var drawBtn = document.getElementById('drawBtn');
var draw1 = KUTE.fromTo('#drawSVG',{draw:'0% 0%'}, {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
var draw2 = KUTE.fromTo('#drawSVG',{draw:'0% 10%'}, {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
var draw3 = KUTE.fromTo('#drawSVG',{draw:'90% 100%'}, {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
var draw4 = KUTE.fromTo('#drawSVG',{draw:'0% 0%'}, {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
var draw5 = KUTE.fromTo('#drawSVG',{draw:'0% 100%'}, {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
// var draw1 = KUTE.to('#drawSVG', {draw:'0% 10%'}, {duration: 1500, easing: "easingCubicIn"});
// var draw2 = KUTE.to('#drawSVG', {draw:'90% 100%'}, {duration: 2500, easing: "easingCubicOut"});
// var draw3 = KUTE.to('#drawSVG', {draw:'100% 100%'}, {duration: 1500, easing: "easingCubicIn"});
// var draw4 = KUTE.to('#drawSVG', {draw:'0% 100%'}, {duration: 3500, easing: "easingBounceOut"});
// var draw5 = KUTE.to('#drawSVG', {draw:'50% 50%'}, {duration: 2500, easing: "easingExponentialInOut"});
draw1.chain(draw2); draw2.chain(draw3); draw3.chain(draw4); draw4.chain(draw5);
drawBtn.addEventListener('click', function(){
!draw1.playing && !draw2.playing && !draw3.playing && !draw4.playing && !draw5.playing && draw1.start();
}, false);
// fill HEX/RGBa
var tween1 = KUTE.to('#fillSVG', {fill: '#069'}, {duration: 1500, yoyo:true, repeat: 1});
// stroke HEX/RGBa
var tween2 = KUTE.to('#fillSVG',{stroke: '#069'}, {delay: 200, yoyo:true, repeat: 1});
// strokeOpacity Number 0-1
var tween3 = KUTE.to('#fillSVG',{strokeOpacity: 0.6}, {duration: 1500, yoyo:true, repeat: 1});
// fillOpacity Number 0-1
var tween4 = KUTE.to('#fillSVG',{fillOpacity: 0.2}, {yoyo:true, repeat: 1});
// strokeWidth Number
var tween5 = KUTE.to('#fillSVG',{strokeWidth: 0}, {duration: 1500, yoyo:true, repeat: 1});
tween1.chain(tween4);
tween2.chain(tween3,tween5);
var cssBtn = document.getElementById('cssBtn');
cssBtn.addEventListener('click',function(){
!tween1.playing && !tween3.playing && !tween4.playing && !tween5.playing && tween1.start();
!tween2.playing && !tween3.playing && !tween4.playing && !tween5.playing && tween2.start();
}, false);
// stopColor HEX/RGBa
var tween6 = KUTE.to('#stopCSVG',{stopColor: 'rgb(00,66,99)'}, {duration: 1500, yoyo:true, repeat: 1});
// stopOpacity Number 0-1
var tween7 = KUTE.to('#stopOSVG',{stopOpacity: 0}, {duration: 1500, yoyo:true, repeat: 1});
tween6.chain(tween7)
var gradBtn = document.getElementById('gradBtn');
gradBtn.addEventListener('click', function(){
!tween6.playing && !tween7.playing && tween6.start();
});

165
attr.html Normal file
View file

@ -0,0 +1,165 @@
<!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 gte IE 10 | !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">
<meta name="description" content="The Attributes Plugin for KUTE.js enables animation for any numeric presentation attribute.">
<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 -->
<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 -->
<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 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="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="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 properties
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>Currently the Attributes Plugin does not support color properties such as <code>fill</code> or <code>stroke</code> as well as properties with multiple values like <code>stroke-dasharray</code>, <code>viewBox</code> or <code>transform</code> for simplicity reasons. Still, you have access to just about any SVGElement/Element presentation attribute available.</p>
<h3>Unitless Properties</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">
<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 Properties</h3>
<p>Similar to the example on gradients with <a href="svg.html">SVG Plugin</a>, we can also animate the gradient positions, but make sure to always include the <code>%</code> suffix:</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">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: #e91b1f; stop-opacity:1"></stop>
<stop offset="100%" style="stop-color: #2196F3; stop-opacity:1"></stop>
</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"/>
</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>
<!-- 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.5.0/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-attr.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>

225
css.html Normal file
View file

@ -0,0 +1,225 @@
<!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 gte IE 10 | !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">
<meta name="description" content="The CSS Plugin for KUTE.js extends the core engine with additional box model, color, border-radius and other properties.">
<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 -->
<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 -->
<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 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="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="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>
<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});
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-item example-box-model bg-lime" style="padding: 15px; font-size:26px">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 IE8 as a fallback for scale animation for text. It's not perfect, can be improved for sure, 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:'#069'}).start();
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: #222 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>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>
<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>
<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>
<!-- 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/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.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>

211
easing.html Normal file
View file

@ -0,0 +1,211 @@
<!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">
<meta name="description" content="A detailed API documentation on KUTE.js main methods, options and easing functions.">
<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 -->
<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="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="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>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>
<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: KUTE.Ease.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>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>
<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>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: KUTE.Physics.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: KUTE.Physics.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: KUTE.Physics.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: KUTE.Physics.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: KUTE.Physics.bezier({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: KUTE.Physics.bezier({points: [{"x":0,"y":0,"cp":[{"x":0.483,"y":0.445}]},{"x":1,"y":1,"cp":[{"x":0.009,"y":0.997}]}] });
</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: KUTE.Physics.bezier({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:KUTE.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>
</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 @thednp 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></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.0.0/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

336
examples.html
View file

@ -9,7 +9,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="KUTE.js is a minimal Javascript animation engine">
<meta name="description" content="Animation examples for KUTE.js core engine with most essential CSS properties and easing functions.">
<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 -->
@ -27,11 +27,13 @@
<!-- 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>
@ -45,17 +47,38 @@
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li><a href="features.html">Features</a></li>
<li class="active"><a href="examples.html">Examples</a></li>
<li><a href="api.html">API</a></li>
<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 class="active"><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="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="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>Quick Examples</h2>
<p>KUTE.js can be used in most cases with native Javascript, but also with jQuery. So, before we head over to the more advanced examples, let's have a quick look at these two basic examples here. <strong>Note</strong>: the examples are posted on <a href="http://codepen.io/thednp/pens/public/" target="_blank">codepen</a>.</p>
<h2>Core Engine</h2>
<p>KUTE.js core engine can animate by itself a great deal of CSS properties as well as scroll. You can do it all with native Javascript or with jQuery, but before we head over to the more advanced examples, let's have a quick look at these two basic examples here. <strong>Note</strong>: the examples are posted on <a href="http://codepen.io/thednp/pens/public/" target="_blank">codepen</a>.</p>
<h3>Basic Native Javascript Example</h3>
<p>When developing with native Javascript, a very basic syntax goes like this:</p>
@ -65,13 +88,15 @@
var tween = KUTE.fromTo('selector', {left: 0}, {left: 100}, {yoyo: true});</code>
</pre>
<p>Now the tween object is created, it's a good time for you to know that via Native Javascript we <strong>always</strong> animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements such as <code>querySelectorAll()</code> or <code>getElementsByTagName()</code>, you need to do a <code>for ()</code> loop. Now let's apply the tween control methods:</p>
<p>Now the tween object is created, it's a good time for you to know that via Native Javascript we <strong>always</strong> animate the first HTML element only, even if you're using a class selector. To create/control a tween for multiple elements such as <code>querySelectorAll()</code> or <code>getElementsByTagName()</code>, you need to do a <code>for ()</code> loop, or make use of the two new methods: <code>.allTo()</code> or <code>.allFromTo()</code>. Now let's apply the tween control methods:</p>
<pre><code class="language-javascript">tween.start(); // starts the animation
tween.stop(); // stops current tween and all chained tweens animating
tween.pause(); // pauses current tween animation
tween.play(); // or tween.resume(); resumes current tween animation
tween.chain(tween2); // when tween animation finished, you can trigger the start of another tween
</code></pre>
<p>The demo for the above example is <a href="http://codepen.io/thednp/pen/Bozbgg" target="_blank">here</a>.</p>
<h3>Basic jQuery Example</h3>
@ -88,10 +113,10 @@ $(tween).KUTE('chain',myTween2); // when tween animation finished, you can trigg
</code></pre>
<p>The demo for the above example is <a href="http://codepen.io/thednp/pen/dYXLyj" target="_blank">here</a>.</p>
<h2>Transform Properties Examples</h2>
<h3>Transform Properties Examples</h3>
<p>KUTE.js supports almost all about <code>transform</code> as described in the <a href="http://www.w3.org/TR/css3-transforms/" target="_blank">spec</a>: the 2D <code>translate</code>, <code>rotate</code>, <code>skewX</code>, <code>skewY</code> and <code>scale</code>, as well as the 3D <code>translateX</code>, <code>translateY</code>, <code>translateZ</code>, <code>translate3d</code>, <code>rotateX</code>, <code>rotateX</code>, <code>rotateY</code>, <code>rotateZ</code> properties. Additionally it allows you to set a <code>perspective</code> for the element or it's parent as well as a <code>perpective-origin</code> for the element or it's parent.</p>
<h3>Translations</h3>
<h4>Translations</h4>
<p>In the next example the first box is moving to left 250px with <code>translate</code> property, the second box is moving to the right by 200px using <code>translateX</code> and the third box is moving to the bottom using <code>translate3d</code>. The last box also uses <code>translate3d</code> but requires a <code>perspective</code> value for the animation on the Z axis to be effective.</p>
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{translate:0},{translate:-250}); // or translate:[x,y] for both axis
var tween2 = KUTE.fromTo('selector2',{translateX:0},{translateX:200});
@ -99,58 +124,59 @@ var tween3 = KUTE.fromTo('selector3',{translate3d:[0,0,0]},{translate3d:[0,100,0
var tween4 = KUTE.fromTo('selector4',{translate3d:[0,0,0]},{translate3d:[0,0,-100]},{parentPerspective: 100});
</code></pre>
<p>And here is how it looks like:</p>
<div class="featurettes">
<div data-property-translate="170" class="example-item example-box bg-indigo">2D</div>
<div data-property-translate-x="-170" class="example-item example-box bg-olive">X</div>
<div data-property-translate3d="[0,170,0]" class="example-item example-box bg-pink">Y</div>
<div data-property-translate3d="[0,0,-100]" data-option-parent-perspective="200" class="example-item example-box bg-red">Z</div>
<div id="translate-examples" class="featurettes">
<div class="example-item example-box bg-indigo">2D</div>
<div class="example-item example-box bg-olive">X</div>
<div class="example-item example-box bg-pink">Y</div>
<div class="example-item example-box bg-red">Z</div>
<div class="example-buttons">
<a class="btn btn-blue" href="#">Start</a>
<a class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>As you can see in your browsers console, for all animations <code>translate3d</code> is used, as explained in the <a href="features.html">features page</a>. Also the first example that's using the 2D <code>translate</code> for both vertical and horizontal axis even if we only set X axis. You can download this example <a href="http://codepen.io/thednp/share/zip/rOLbyY">here</a>.</p>
<p><strong>Remember</strong>: stacking <code>translate</code> and <code>translate3d</code> together may not work and IE9 does not support <code>perspective</code>.</p>
<h3>Rotations</h3>
<h4>Rotations</h4>
<p>Next we're gonna animate 4 elements with one axis each element. Unlike translations, KUTE.js does not support <code>rotate3d</code>.</p>
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{rotate:0},{rotate:-720});
var tween2 = KUTE.fromTo('selector2',{rotateX:0},{rotateX:200});
var tween3 = KUTE.fromTo('selector3',{rotateY:0},{rotateY:160},{perspective:100});
var tween4 = KUTE.fromTo('selector4',{rotateZ:0},{rotateZ:360});
</code></pre>
</code></pre>
<p>And here is how it looks like:</p>
<div class="featurettes">
<div data-property-rotate="-720" class="example-item example-box bg-blue">2D</div>
<div data-property-rotate-x="180" class="example-item example-box bg-indigo">X</div>
<div data-property-rotate-y="-180" data-option-perspective="200" class="example-item example-box bg-olive">Y</div>
<div data-property-rotate-z="360" class="example-item example-box bg-pink">Z</div>
<div id="rotExamples" class="featurettes">
<div class="example-item example-box bg-blue">2D</div>
<div class="example-item example-box bg-indigo">X</div>
<div data-option-perspective="200" class="example-item example-box bg-olive">Y</div>
<div class="example-item example-box bg-pink">Z</div>
<div class="example-buttons">
<a class="btn btn-green" href="#">Start</a>
<a class="btn btn-green" href="javascript:void(0)">Start</a>
</div>
</div>
<p>The <code>rotateX</code> and <code>rotateY</code> are 3D based rotations, so they require a perspective in order to make the browser render proper 3D layers, but in the example they animate different because only the second, Y axis, uses a <code>perspective</code> setting. The rotation on Z axis does not require a perspective. Unlike translations, you can stack all axis rotation for your animation, but we will see that in a later example. You can download this example <a href="http://codepen.io/thednp/share/zip/NGrmMR">here</a>.</p>
<h3>Skews</h3>
<h4>Skews</h4>
<p>KUTE.js supports <code>skewX</code> and <code>skewY</code> so let's animate the two. Since they are 2D transformations, IE9 supports skews.</p>
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{skewX:0},{skewX:20});
var tween2 = KUTE.fromTo('selector2',{skewY:0},{skewY:45});
</code></pre>
</code></pre>
<p>And here is how it looks like:</p>
<div class="featurettes">
<div data-property-skew-x="-25" class="example-item example-box bg-teal">X</div>
<div data-property-skew-y="25" class="example-item example-box bg-green">Y</div>
<div id="skewExamples" class="featurettes">
<div class="example-item example-box bg-teal">X</div>
<div class="example-item example-box bg-green">Y</div>
<div class="example-buttons">
<a class="btn btn-yellow" href="#">Start</a>
<a class="btn btn-yellow" href="javascript:void(0)">Start</a>
</div>
</div>
<p>You can download this example <a href='http://codepen.io/thednp/share/zip/wKWbKd/'>here</a>.</p>
<h3>Mixed Transformations</h3>
<h4>Mixed Transformations</h4>
<p>The current specification does not support animating different transform properties with multiple tween objects at the same time, you must stack them all together into a single object. See the example below:</p>
<pre><code class="language-javascript">var tween1 = KUTE.fromTo('selector1',{rotateX:0},{rotateX:20}).start();
@ -173,19 +199,19 @@ var tween2 = KUTE.fromTo(
</code></pre>
<p>Now you can see we are using the specific transform options, the first tween object uses these settings for an element and the second for its parent.</p>
<div class="featurettes">
<div data-property-translate-x="200" data-property-rotate-x="360" data-property-rotate-y="15" data-property-rotate-z="5" data-option-perspective="400" class="example-item example-box bg-pink" style="line-height: 50px; font-size: 25px;">element perspective 400px</div>
<div data-property-translate-x="-200" data-property-rotate-x="360" data-property-rotate-y="15" data-property-rotate-z="5" data-option-parent-perspective="400" class="example-item example-box bg-orange" style="line-height: 50px; font-size: 25px;">parent perspective 400px</div>
<div id="mixTransforms" class="featurettes">
<div class="example-item example-box bg-pink" style="line-height: 50px; font-size: 25px;">element perspective 400px</div>
<div class="example-item example-box bg-orange" style="line-height: 50px; font-size: 25px;">parent perspective 400px</div>
<div class="example-buttons">
<a class="btn btn-olive" href="#">Start</a>
<a class="btn btn-olive" href="javascript:void(0)">Start</a>
</div>
</div>
<p>This example also shows the difference between an element's perspective and a parent's perspective. You can download the above example <a href='http://codepen.io/thednp/share/zip/jbrovv/'>here</a>.</p>
<h3>Chained Transformations</h3>
<p>I'm gonna insist on the tween chaining feature a bit because when we run animations one after another we are kinda expecting a certain degree of continuity. As explained before, the best solution is the <code>.to()</code> method because it has the ability to <strong>stack</strong> properties found in the element's inline styling, mostly from previous tween animation, and use them as start values for the next tween. It also transfers unchanged values to values end for that same reason. OK now, let's see a side by side comparison with 3 elements:</p>
<h4>Chained Transformations</h4>
<p>KUTE.js has the ability to stack transform properties as they come in chained tweens because when we run animations one after another we are kinda expecting a certain degree of continuity. As explained before, the best solution is the <code>.to()</code> method because it has the ability to <strong>stack</strong> properties found in the element's inline styling, mostly from previous tween animation, and use them as start values for the next tween. It also transfers unchanged values to values end for that same reason. OK now, let's see a side by side comparison with 3 elements:</p>
<div id="chainedTweens" class="featurettes">
<div class="example-item example-box bg-gray" style="font-size: 30px">FROMTO</div>
<div class="example-item example-box bg-olive" style="font-size: 30px">FROMTO</div>
@ -208,40 +234,14 @@ var tween2 = KUTE.fromTo(
<li>2D and 3D translations would work best in if you provide a value at all times; eg. <code>translate:[x,y]</code> and <code>translate3d:[x,y,z]</code>; for instance using <code>translate:150</code> or <code>translateX:150</code> would mean that all other axis are 0;</li>
<li>on larger amount of elements animating chains, the <code>.fromTo()</code> method is fastest, so you will have more work, but can potentially minimize or eliminate any syncronization issues that may occur, as explained in the <a href="features.html">features page</a>;</li>
<li>download this example <a href='http://codepen.io/thednp/share/zip/PPWZRL/'>here</a>.</li>
</ul>
<h2>Border Radius</h2>
<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>
<p>And here is how it looks like:</p>
<div class="featurettes">
<div data-property-border-radius="80" class="example-item example-box bg-red">ALL</div>
<div data-property-border-top-left-radius="150" class="example-item example-box bg-pink">TL</div>
<div data-property-border-top-right-radius="150" data-option-perspective="200" class="example-item example-box bg-olive">TR</div>
<div data-property-border-bottom-left-radius="150" class="example-item example-box bg-indigo">BL</div>
<div data-property-border-bottom-right-radius="150" class="example-item example-box bg-blue">BR</div>
<div class="example-buttons">
<a class="btn btn-green" href="#">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>
</ul>
<h2>Box Model Properties</h2>
<p>While KUTE.js supports almost all the box model properties, the next example will animate most common properties, we will focus mostly on size, spacing and position. Other properties such as <code>minWidth</code> or <code>maxHeight</code> require a more complex context and we won't insist on them.</p>
<h3>Box Model Properties</h3>
<p>KUTE.js core engine supports most used box model properties, and almost all the box model properties via the <a href="css.html">CSS Plugin</a>, so the next example will only animate <code>width</code>, <code>height</code>, <code>top</code> and <code>left</code>.</p>
<pre><code class="language-javascript">var tween1 = KUTE.to('selector1',{width:200});
var tween2 = KUTE.to('selector1',{height:300});
var tween3 = KUTE.to('selector1',{left:250});
var tween4 = KUTE.to('selector1',{top:100});
var tween5 = KUTE.to('selector1',{padding:'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">
@ -255,38 +255,16 @@ var tween5 = KUTE.to('selector1',{padding:'5%'});
<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>
<h2>Text Properties</h2>
<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',{line-height:24});
var tween3 = KUTE.to('selector1',{letter-spacing: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="min-height: 150px">
<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 IE8 as a fallback for scale animation for text. It's not perfect, can be improved for sure, but if it's a must, this would do. Download this example <a href='http://codepen.io/thednp/share/zip/bVqLpb/'>here</a>.</p>
<h2>Color Properties</h2>
<p>The next example is about animating color properties. As for example, check these lines for reference.</p>
<pre><code class="language-javascript">KUTE.to('selector1',{color:'#069'}).start();
<h3>Color Properties</h3>
<p>The next example is about animating color properties. As for example, check these lines for reference. Additional color properties such as <code>borderColor</code> or <code>borderLeftColor</code> are supported via the <a href="css.html">CSS Plugin</a>.</p>
<pre><code class="language-javascript">KUTE.to('selector1',{color:'rgb(0,66,99)'}).start();
KUTE.to('selector1',{backgroundColor:'#069'}).start();
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:'#069'}).start();
KUTE.to('selector1',{borderLeftColor:'#069'}).start();
KUTE.to('selector1',{backgroundColor:'turquoise'}).start(); // IE9+ only
</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="width: 135px; height: 135px; border:15px solid #9C27B0; line-height: 105px; font-size:30px">Colors</div>
<div class="example-item example-box bg-olive">Colors</div>
<div class="example-buttons">
<a class="btn btn-blue" href="#">Start</a>
@ -294,36 +272,8 @@ KUTE.to('selector1',{borderLeftColor:'#069'}).start();
</div>
<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>
<h2>Clip Property</h2>
<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>
<h2>Background Position</h2>
<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>
<h2>Vertical Scrolling</h2>
<h3>Vertical Scrolling</h3>
<p>Another property we can animate with KUTE.js is <code>scrollTop</code>. I works for both the window and any scrollable object. Quick example:</p>
<pre><code class="language-javascript">KUTE.to('selector',{scroll:450}).start(); // for a scrollable element
KUTE.to('window',{scroll:450}).start(); // for the window
@ -331,10 +281,10 @@ KUTE.to('window',{scroll:450}).start(); // for the window
<p>A working example would work like <a href="http://codepen.io/thednp/pen/bVqKmp/" target="_blank">this</a>. Scroll works with IE8+ and is a unitless property even if these scroll distances are measured in pixels.</p>
<h2 id="crossbrowser">Cross Browser Animation Example</h2>
<h3 id="crossbrowser">Cross Browser Animation Example</h3>
<p>Unlike the examples <a href="http://codepen.io/thednp/pens/public/" target="_blank">hosted on Codepen</a>, most examples here should be supported on legacy browsers. The next example is going to explain more details about how to target browsers according to their supported properties, so stick around. So, if your target audience uses legacy browsers in a significant percent, check to have the proper polyfills and also make sure you target your browsers, here's a <a href="http://browserhacks.com/" target="_blank">complete reference</a>. Now we are ready:</li>
</ul>
<h3>Collect Information And Cache It</h3>
<h4>Collect Information And Cache It</h4>
<pre><code class="language-javascript">// grab an HTML element to build a tween object for it
var element = document.getElementById("myElement");
@ -348,7 +298,7 @@ var isIE9 = isIE === 9;
// you include all you need for your target audience
</code></pre>
<h3>Define Properties And Options Objects</h3>
<h4>Define Properties And Options Objects</h4>
<pre><code class="language-javascript">// create values and options objects
var startValues = {};
var endValues = {};
@ -390,7 +340,7 @@ options.yoyo = true;
options.repeat = 1;
</code></pre>
<h3>Build Tween Object And Tween Controls</h3>
<h4>Build Tween Object And Tween Controls</h4>
<pre><code class="language-javascript">// the cached object
var myTween = KUTE.fromTo(element, startValues, endValues, options);
@ -418,7 +368,7 @@ playPauseButton.addEventListener('click', function(e){
}
}, false);
</code></pre>
<h3>Live Demo</h3>
<h4>Live Demo</h4>
<div class="featurettes" id="crossBrowser">
<div id="myElement" class="example-item example-box bg-yellow">
@ -437,20 +387,137 @@ playPauseButton.addEventListener('click', function(e){
<li>the <code class="bg-olive">RESUME</code> button will use the <code>.resume()</code> method and resumes the animation; this reverses the button's initial state;</li>
<li>make sure you work with the conditions properly when you want to pause an animation you MUST check both <code>!myTween.playing</code> and <code>myTween.paused</code> conditions because you could end up with errors.</li>
</ul>
<h3>Tween Object Collections</h3>
<p>With KUTE.js 1.5.0 new tween object constructor methods were introduced, and they allow you to create a tween object for each element in a collection, a very handy way to ease and speed up the animation programing workflow. Let's have a little fun.</p>
<pre><code class="language-javascript">// a simple .to() for a collection of elements would look like this
var myMultiTween1 = KUTE.allTo('selector1',{translate:[0,150]});
// or a more complex .fromTo() example with the two new options
var myMultiTween2 = KUTE.allFromTo(
'selector2',
{translate:[0,0], rotate: 0},
{translate:[0,150], rotate: 360},
{transformOrigin: '10% 10%', offset: 200 }
);
</code></pre>
<p>And should looks like this:</p>
<div class="featurettes">
<div class="example-item example-box example-multi bg-indigo">K</div>
<div class="example-item example-box example-multi bg-olive">U</div>
<div class="example-item example-box example-multi bg-pink">T</div>
<div class="example-item example-box example-multi bg-red">E</div>
<div class="example-buttons">
<a class="btn btn-green" onclick="startMultiTween();" href="javascript:void(0)">Start</a>
</div>
</div>
<p>As you can see, we also used the new tween options <code>offset</code> and <code>transformOrigin</code> and they make it so much more easy.</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 @thednp 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></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>
</ul>
<h3>Easing Functions</h3>
<p>We've talked about KUTE.js featuring many easing functions, so let's go ahead and create some examples. The first box below will animate with <code>linear</code> easing function and the second will use another function you choose. The example also features some predefined easing functions from the additional plugins: cubic bezier easing and physics based easing functions.</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 id="easingSelectButton" class="btn btn-red" data-function="toggle" href="#">Select</a>
<ul id="easings">
<li class="titlef">Core Functions</li>
<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>
<li class="titlef">Bezier Functions</li>
<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>
<li class="titlef">Physics Functions</li>
<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 id="startEasingTween" class="btn btn-blue" href="#">Start</a>
</div>
</div>
<p>As you can see, the cubic-bezier easing functions can be used with both presets and as well as strings such as <code>bezier(0.15, 0.7, 0.2, 0.9)</code>. The physics based easing functions have their own presets, but the last 6 are all the examples shown in the <a href="easing.html">API documentation</a>, so make sure to check.</p>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2015 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
@ -466,8 +533,9 @@ playPauseButton.addEventListener('click', function(e){
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- some stuff -->
<!--<script src="./src/kute-keys.js"></script> some stuff -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-bezier.js"></script> <!-- KUTE.js Bezier Easing -->
<script src="./src/kute-physics.js"></script> <!-- KUTE.js Physics Easing -->
<script src="./assets/js/scripts.js"></script> <!-- global scripts stuff -->
<script src="./assets/js/examples.js"></script> <!-- examples stuff -->
</body>

339
extend.html Normal file
View file

@ -0,0 +1,339 @@
<!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">
<meta name="description" content="A quick start guide for KUTE.js, CDN sources, NPM.">
<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 -->
<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 -->
<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="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="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
* package - pluginName
* desc - what your plugin does
* by yourNickname aka YOUR NAME
* Licensed under MIT-License
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
var KUTE = require("./kute.js");
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
factory(KUTE);
} else {
throw new Error("pluginName require KUTE.js.");
}
}( 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>KUTE.Tween</code> function to get the internal references notation:</p>
<pre><code class="language-javascript">//add a reference to KUTE object
var K = window.KUTE;
// let's add a timescale method
K.Tween.prototype.timescale = function(factor){
this._dr *= factor; // this._dr is the internal tween duration
return this;
}
// or let's add a reverse method
K.Tween.prototype.reverse = function(){
for (var p in this._vE) {
var tmp = this._vSR[p]; // we cache this object first
this._vSR[p] = this._vE[p]; // this._vSR is the internal valuesStartRepeat object
this._vE[p] = tmp; // this._vE is the internal valuesEnd object
this._vS[p] = this._vSR[p]; // this._vSR is the internal valuesStart object
}
return this;
}
// go back in time
K.Tween.prototype.seek = function (time) {
this._sT -= time; // this._sT is the startTime
return this;
};
// how about a restart method
K.Tween.prototype.restart = function(){
if (this.playing) {
this.stop();
this.start();
}
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 secific 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.prS['propertyName']</code> a <strong>prepareStart</strong> function to get the current value of the property required for the <code>.to()</code> method;</li>
<li><code>KUTE.pp['propertyName']</code> a <strong>processProperty</strong> function to process the user value / current value to have it ready to tween;</li>
<li><code>KUTE.dom['propertyName']</code> a <strong>domUpdate</strong> function that will update the property value into the DOM;</li>
<li><strong>optional</strong> a function that will work as an utility for your 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 KUTE object
var K = window.KUTE;
// filter unsupported browsers
if (!('boxShadow' in document.body.style)) {return;}
// the preffixed boxShadow property, mostly for legacy browsers
// maybe the browser is supporting the property with its vendor preffix
// box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
var _boxShadow = K.property('boxShadow'); // note we're using the KUTE.property() autopreffix utility
var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}\))\s?)/gi; // a full RegEx for color strings
</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
// which means you need to read the current computed value
K.prS['boxShadow'] = function(element,property,value){
var cssBoxShadow = K.gCS(element,'boxShadow'); // where K.gCS() is an accurate getComputedStyle() core method
return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
}
// note that in some cases the window.getComputedStyle(element,null) can be more accurate
// we are using a hybrid function that's trying to get proper colors and other stuff that
// some legacy browsers lack in this matter
// 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 or 0 for other types
</code></pre>
<p>Next we'll need to write a <code>processProperty</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>K.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 processProperty for boxShadow
// registers the K.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]
K.pp['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 K.dom) ) {
K.dom['boxShadow'] = function(w,p,v) {
// let's start with the numbers | set unit | also determine inset
var numbers = [], unit = 'px', // the unit is always px
inset = w._vS[p][5] !== 'none' || w._vE[p][5] !== 'none' ? ' inset' : false;
for (var i=0; i&lt;4; i++){
numbers.push( (w._vS[p][i] + (w._vE[p][i] - w._vS[p][i]) * v ) + unit);
}
// now we handle the color
var color, _color = {};
for (var c in w._vE[p][4]) {
_color[c] = parseInt(w._vS[p][4][c] + (w._vE[p][4][c] - w._vS[p][4][c]) * v )||0;
}
color = 'rgb(' + _color.r + ',' + _color.g + ',' + _color.b + ') ';
// last piece of the puzzle, the DOM update
w._el.style[_boxShadow] = inset ? color + numbers.join(' ') + inset : color + numbers.join(' ');
};
}
// processProperty for boxShadow, builds basic structure with ready to tween values
if (typeof value === 'string'){
var color, inset = false;
// make sure to always have the inset last if possible
inset = /inset/.test(value) ? 'inset' : inset;
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"
color = value.match(colRegEx);
value = value.replace(color[0],'').split(' ').concat([color[0].replace(/\s/g,'')],[inset]);
value = K.processBoxShadowArray(value);
} else if (value instanceof Array){
value = K.processBoxShadowArray(value);
}
return value;
}
</code></pre>
<p>Notice we've used an utility function that fixes the Array values and makes sure the structure is right.</p>
<pre><code class="language-javascript">// utility function to process values accordingly
// numbers must be floats/integers and color must be rgb object
K.processBoxShadowArray = function(shadow){
var newShadow, i;
// properly process the shadow based on amount of values
if (shadow.length === 3) { // [h-shadow, v-shadow, color]
newShadow = [shadow[0], shadow[1], 0, 0, shadow[2], 'none'];
} 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'];
} else if (shadow.length === 6) { // ideal [h-shadow, v-shadow, blur, spread, color, inset]
newShadow = shadow;
}
// make sure the numbers are ready to tween
for (i=0;i&lt;4;i++){
newShadow[i] = parseFloat(newShadow[i]);
}
// make sure color is an rgb object
newShadow[4] = K.truC(newShadow[4]); // where K.truC() is a core method to return the true color in rgb object format
return newShadow;
}
</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
var myBSTween1 = KUTE.to('selector', {boxShadow: '15px 25px #069'}).start();
// or a fromTo with string and array, hex and rgb
var myBSTween2 = KUTE.fromTo('selector', {boxShadow: [15, 25, 0, '#069']}, {boxShadow: '0px 0px rgb(0,0,0)'}).start();
// 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.gCS(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.gIS()</kbd> a <code>getInlineStyle</code> function to read the current inline style, very useful for transform, because decomposing a computed <strong>matrix</strong> would require a ton lot more code;</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.</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(rgb)</kbd> a function that accepts RGBa formatted colors and returns a <code>#006699</code> color string;</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 @thednp 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></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.0.0/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.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>

170
features.html
View file

@ -9,7 +9,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="KUTE.js is a minimal Javascript animation engine">
<meta name="description" content="The KUTE.js features overview.">
<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 -->
@ -25,6 +25,9 @@
<!-- 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]>
@ -43,16 +46,38 @@
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="active"><a href="features.html">Features</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="api.html">API</a></li>
<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="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="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 id="performance">Delivering Killer Performance</h2>
<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>
@ -60,128 +85,57 @@
</div>
<div class="content-wrap">
<h2 id="prefix">Break Free Of Browser Prefixes</h2>
<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">
<h2 id="compatibiity">Browser Compatibility</h2>
<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 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>
<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 requires <code>window.requestAnimationFrame()</code> for the main thread, <code>window.performance.now()</code> for checking the current time, <code>.indexOf()</code> for array checks, <code>window.getComputedStyle()</code> for the <code>.to()</code> method and <code>.addEventListener()</code> for scroll. 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. The provided <strong>ideal HTML template</strong> is the best solution for targeting Microsoft's legacy browsers.</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">
<h2 id="methods">Methods, Tools and Options</h2>
<h3>Building Tween Objects</h3>
<p>KUTE.js allows you to create tween objects with the help of <code>.to()</code> and <code>.fromTo()</code> public methods, with distinctive functionalities.</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>
<h3>Tween Control</h3>
<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 running or is paused. You need to see the <a href="api.html">documentation</a> to learn how these work.</p>
<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>
<h3>Tween Options</h3>
<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?</p>
<h3>Callback System</h3>
<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>
<h3>Addons</h3>
<p>KUTE.js sports some fine tuned addons: jQuery Plugin, cubic bezier easing functions and also physics based easing functions. I am also considering to feature an attributes plugin as well as SVG library and maybe other tools in the future.</p>
<h4>Addons</h4>
<p>KUTE.js sports some fine tuned addons: jQuery Plugin, cubic bezier easing functions and also physics based easing functions. It also features an attributes plugin as well as a SVG plugin for various awesome stuff, but I'm open for more features in the future.</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">
<h2>Support For Plenty Of Properties</h2>
<p>KUTE.js covers all animation needs such as most <code>transform</code> properties, <code>scroll</code> for window or a given element, colors, <code>border-radius</code>, and almost the full box model. Due to it's modular coding, KUTE.js is very flexible and makes it very easy to add support for more properties, but I'm considering removing unnecessary properties in the future (mostly from the box model category). 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>.</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>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> but requires that you use the provided HTML template in order to detect the browser. 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>
<ul>
<li><kbd>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. Supported on IE9.</li>
<li><kbd>rotate</kbd> is a property used to rotate an element on the Z axis or the plain document. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees. Supported on IE9.</li>
<li><kbd>skewX</kbd> is a property used to apply a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew an element by 25 degrees. Supported on IE9.</li>
<li><kbd>skewY</kbd> is a property used to apply a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew an element by 25 degrees. Supported on IE9.</li>
<li><kbd>scale</kbd> is a property used to apply a size transformation. Eg. <code>scale:2</code> will enlarge an element by a degree of 2. Supported on IE9.</li>
<li><kbd>matrix</kbd> property is not supported.</li>
</ul>
<h3>3D Transform Properties</h3>
<ul>
<li><kbd>translateX</kbd> property is for horizontal movement. EG. <code>translateX:150</code> to translate an element 150px to the right. Modern browsers only.</li>
<li><kbd>translateY</kbd> property is for vertical movement. EG. <code>translateY:-250</code> to translate an element 250px towards the top. Modern browsers only.</li>
<li><kbd>translateZ</kbd> property is for movement 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. Modern browsers only and requires a <code>perspective</code> tween option to be used; the smaller perspective value, the deeper translation.</li>
<li><kbd>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. Modern browsers only and also requires using a <code>perspective</code> tween option.</li>
<li><kbd>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. Modern browsers only and requires perspective.</li>
<li><kbd>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. Modern browsers only and also requires perspective.</li>
<li><kbd>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. Modern browsers only and doesn't require perspective.</li>
<li><kbd>rotate3d</kbd> and <kbd>matrix3d</kbd> properties are not supported.</li>
</ul>
<h3>Box Model Properties</h3>
<ul>
<li><kbd>left</kbd>, <kbd>top</kbd>, <kbd>right</kbd> and <kbd>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>width</kbd>, <kbd>height</kbd>, <kbd>minWidth</kbd>, <kbd>minHeight</kbd>, <kbd>maxWidth</kbd>, <kbd>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>padding</kbd>, <kbd>margin</kbd>, <kbd>paddingTop</kbd>, <kbd>paddingBottom</kbd>, <kbd>paddingLeft</kbd>, <kbd>paddingRight</kbd>, <kbd>marginTop</kbd>, <kbd>marginBottom</kbd>, <kbd>marginLeft</kbd> and <kbd>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>borderWidth</kbd>, <kbd>borderTopWidth</kbd>, <kbd>borderRightWidth</kbd>, <kbd>borderBottomWidth</kbd> are <kbd>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>
</ul>
<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>
<ul>
<li><kbd>borderRadius</kbd> allows you to animate the <code>border-radius</code> on all corners for a given element.</li>
<li><kbd>borderTopLeftRadius</kbd> allows you to animate the <code>border-top-left-radius</code> for a given element.</li>
<li><kbd>borderTopRightRadius</kbd> allows you to animate the <code>border-top-right-radius</code> for a given element.</li>
<li><kbd>borderBottomLeftRadius</kbd> allows you to animate the <code>border-bottom-left-radius</code>for a given element.</li>
<li><kbd>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>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></p>
<ul>
<li><kbd>color</kbd> allows you to animate the color for a given text element.</li>
<li><kbd>backgroundColor</kbd> allows you to animate the <code>background-color</code> for a given element.</li>
<li><kbd>borderColor</kbd> allows you to animate the <code>border-color</code> on all sides for a given element.</li>
<li><kbd>borderTopColor</kbd>, <kbd>borderRightColor</kbd>, <kbd>borderBottomColor</kbd> and <kbd>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>border-color</code> property as well as web color names (Eg. red, green, olive, etc.) are not supported.</p>
<h3>Text Properties</h3>
<p> These properties 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>fontSize</kbd> allows you to animate the <code>font-size</code> for a given element.</li>
<li><kbd>lineHeight</kbd> allows you to animate the <code>line-height</code> for a given element.</li>
<li><kbd>letterSpacing</kbd> allows you to animate the <code>letter-spacing</code> for a given element.</li>
</ul>
<p><strong>Remember</strong>: these properties are also <strong>layout modifiers</strong>.</p>
<h3>Scroll Animation</h3>
<p>KUTE.js currently supports only vertical scroll for both the window and a given element that's scrollable. Both <code>scroll: 150</code> or <code>scrollTop: 150</code> notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles.</p>
<h3>Other properties</h3>
<ul>
<li><kbd>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>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>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.</p>
</div>
<div class="content-wrap">
<h2>Developer Friendly</h2>
<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>
@ -197,7 +151,7 @@
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2015 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
@ -211,7 +165,7 @@
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- some stuff -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

51
index.html
View file

@ -24,7 +24,10 @@
<!-- 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]>
@ -43,9 +46,30 @@
<div class="content-wrap">
<a href="index.html"><h1 class="active">KUTE.<span>js</span></h1></a>
<ul class="nav">
<li><a href="features.html">Features</a></li>
<li><a href="examples.html">Examples</a></li>
<li><a href="api.html">API</a></li>
<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="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="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>
@ -93,8 +117,8 @@
<h2 class="nomarginlarge">At A Glance</h2>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>Killer Performance</h3>
<p>KUTE.js is crazy fast with it's <a href="features.html#performance">outstanding performance</a>, with 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>
<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>
@ -104,21 +128,21 @@
<div class="columns hiddenoverflow">
<div class="col2">
<h3>All Browsers Compatible</h3>
<p>KUTE.js covers <a href="features.html#compatibiity">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>
<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 create tweens and chainable tweens, gives you tween control methods (stop/pause/resume/restart) and comes with full <a href="features.html#methods">spectrum tween options</a>.</p>
<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="api.html#tweenoptions">tween options</a>.</p>
</div>
</div>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>Packed With Tools</h3>
<p>KUTE.js comes with tools to help you configure awesome animations: jQuery plugin, cubic-bezier and physics easing functions, color convertors, and a lot of options to play with.</p>
<p>KUTE.js comes with tools to help you configure awesome animations: SVG Plugin, jQuery plugin, cubic-bezier and physics easing functions, color convertors, and you can even <a href="features.html#extensible">extend</a> it yourself.</p>
</div>
<div class="col2">
<h3>Plenty Of Properties</h3>
<p>KUTE.js covers all animation needs such as <code>transform</code>, <code>scroll</code> (window or other elements), colors (border, background and text), <code>border-radius</code>, almost the full box model and also text properties.</p>
<p>KUTE.js covers all animation needs such as SVG morph and other specific CSS properties, then <code>transform</code>, <code>scroll</code>, <code>border-radius</code>, and almost the full box model and also text properties.</p>
</div>
</div>
<div class="columns hiddenoverflow">
@ -168,7 +192,7 @@
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2015 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
@ -182,8 +206,9 @@
<!-- Placed at the end of the document so the pages load faster -->
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE local -->
<script src="./assets/js/home.js"></script> <!-- some stuff -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.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>

60
performance.html
View file

@ -5,39 +5,38 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="KUTE.js is a minimal Javascript animation engine">
<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 -->
<title>KUTE.js | Performance Testing Page</title>
<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;}
#container {
width: 200px; /*height: 200px;*/
margin: 0 auto;
position: relative;
display: block;
}
.line {
width: 200px;
height: 2px;
position: absolute;
transform: translate3d(0px, 0px, 0px);
}
<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;}
#container {
width: 200px; /*height: 200px;*/
margin: 0 auto;
position: relative;
display: block;
}
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: 400px;}
.hack { transform: translate3d(0px,0px,0px); }
.padding {padding: 20px}
.btn-group { margin-bottom: 15px; }
.btn {font-size: 13px; }
</style>
.text-danger {font-weight: bold}
</style>
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
</head>
<body>
@ -90,18 +89,11 @@
<li><a id="800" href="#">800</a></li>
<li><a id="900" href="#">900</a></li>
<li><a id="1000" href="#">1000</a></li>
<!--<li><a id="1500" href="#">1500</a></li>
<li><a id="2000" href="#">2000</a></li>-->
</ul>
</span>
<div id="hack" style="display: none">
<p>When left is used, try the hack: </p>
<span class="btn-group" data-toggle="buttons">
<label class="btn btn-info">
<input type="checkbox" autocomplete="off"><span class="state">Hack OFF</span>
</label>
</span>
</div>
<hr>
@ -112,11 +104,11 @@
<!--[if IE]><p class="text-danger">The test page is not intended for legacy browsers.</p><![endif]-->
<!--[if !IE ]><!-->
<p>These tests are only for modern browsers. In Google Chrome 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>The hack refers to adding a blank transform <code>translate3d(0px,0px,0px);</code> for the elements to promote them into separate layers, as described <a href="https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas#promote-elements-that-move-or-fade" target="_blank">here</a>.</p>
<p class="text-danger">Do not try this test on lower end or mobile devices.</p>
<!--<![endif]-->
</div>
<div id="container"></div>
@ -128,9 +120,9 @@
<!--<script src="http://cdn.jsdelivr.net/kute.js/0.9.5/kute.min.js"></script> KUTE CDN -->
<!--[if !IE ]><!-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/bootstrap.native/0.9.9/bootstrap-native.min.js"></script>
<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.0/TweenMax.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.js"></script>
<script src="./assets/js/perf.js"></script>

224
properties.html Normal file
View file

@ -0,0 +1,224 @@
<!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">
<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,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 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 -->
<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><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="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="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>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 all 2D transform properties except <code>matrix</code>.</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. Supported on IE9.</li>
<li><kbd class="bg-blue">rotate</kbd> is a property used to rotate an element on the Z axis or the plain document. Eg. <code>rotate:250</code> will rotate an element clockwise by 250 degrees. Supported on IE9.</li>
<li><kbd class="bg-blue">skewX</kbd> is a property used to apply a skew transformation on the X axis. Eg. <code>skewX:25</code> will skew an element by 25 degrees. Supported on IE9.</li>
<li><kbd class="bg-blue">skewY</kbd> is a property used to apply a skew transformation on the Y axis. Eg. <code>skewY:25</code> will skew an element by 25 degrees. Supported on IE9.</li>
<li><kbd class="bg-blue">scale</kbd> is a property used to apply a size transformation. Eg. <code>scale:2</code> will enlarge an element by a degree of 2. Supported on IE9.</li>
<li><kbd class="bg-red">matrix</kbd> property is 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>.</p>
<ul>
<li><kbd class="bg-blue">translateX</kbd> property is for horizontal movement. EG. <code>translateX:150</code> to translate an element 150px to the right. Modern browsers only.</li>
<li><kbd class="bg-blue">translateY</kbd> property is for vertical movement. EG. <code>translateY:-250</code> to translate an element 250px towards the top. Modern browsers only.</li>
<li><kbd class="bg-blue">translateZ</kbd> property is for movement 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. Modern browsers only and requires a <code>perspective</code> tween option to be used; the smaller perspective value, the deeper translation.</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. Modern browsers only and also requires using a <code>perspective</code> tween option.</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. Modern browsers only and requires perspective.</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. Modern browsers only and also requires perspective.</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. Modern browsers only and doesn't require perspective.</li>
<li><kbd class="bg-red">rotate3d</kbd> and <kbd class="bg-red">matrix3d</kbd> properties are not supported.</li>
</ul>
<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><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 while making sure to use the proper vendor prefix if a slightly older browser version is detected.</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>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.</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>.
<p>The SVG Plugin also manages animation for most useful CSS properties that are specific to SVG elements, since SMIL animations tend to go extinct, this plugin can get quite useful.</p>
<ul>
<li><kbd class="bg-olive">strokeWidth</kbd> allows you to animate the <code>stroke-width</code> for a given SVG element.</li>
<li><kbd class="bg-olive">strokeOpacity</kbd> allows you to animate the <code>stroke-opacity</code> for a given SVG element.</li>
<li><kbd class="bg-olive">fillOpacity</kbd> allows you to animate the <code>fill-opacity</code> for a given SVG element.</li>
<li><kbd class="bg-olive">stopOpacity</kbd> allows you to animate the <code>stop-opacity</code> for a given gradient SVG element.</li>
<li><kbd class="bg-olive">fill</kbd> allows you to animate the <code>fill</code> color property for a given SVG element.</li>
<li><kbd class="bg-olive">stroke</kbd> allows you to animate the <code>stroke</code> color for a given SVG element.</li>
<li><kbd class="bg-olive">stopColor</kbd> allows you to animate the <code>stop-color</code> for a given gradient SVG element.</li>
</ul>
<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>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>
<h3>Text 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 also <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>). Both <code>scroll: 150</code> or <code>scrollTop: 150</code> notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks.</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.</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 @thednp 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></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/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

75
src/kute-attr.js Normal file
View file

@ -0,0 +1,75 @@
/* KUTE.js - The Light Tweening Engine
* package - Attributes Plugin
* desc - enables animation for any numeric presentation attribute
* by dnp_theme
* Licensed under MIT-License
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
// Browser globals
factory(KUTE);
} else {
throw new Error("Attributes Plugin require KUTE.js.");
}
}( function (KUTE) {
'use strict';
var K = window.KUTE;
// get current attribute value
K.gCA = function(e,a){
return e.getAttribute(a);
}
K.prS['attr'] = function(el,p,v){
var f = {};
for (var a in v){
f[a.replace(/_+[a-z]+/,'')] = K.gCA(el,a.replace(/_+[a-z]+/,''));
}
return f;
};
// register the render attributes object
if (!('attr' in K.dom)) {
K.dom.attr = function(w,p,v){
for ( var o in w._vE[p] ){
K.dom.attr.prototype[o](w,o,v);
}
};
}
var ra = K.dom.attr.prototype;
// process attributes object K.pp.attr(t[x])
// and also register their render functions
K.pp['attr'] = function(a,o){
var ats = {}, p;
for ( p in o ) {
if ( /%|px/.test(o[p]) ) {
var u = K.truD(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
if (!(p+s in ra)) {
ra[p+s] = function(w,p,v){
w._el.setAttribute(p.replace(s,''), (w._vS.attr[p].v + (w._vE.attr[p].v - w._vS.attr[p].v) * v) + w._vE.attr[p].u);
}
}
ats[p+s] = K.truD(o[p]);
} else {
if (!(p in ra)) {
ra[p] = function(w,p,v){
w._el.setAttribute(p, w._vS.attr[p] + (w._vE.attr[p]- w._vS.attr[p]) * v);
}
}
ats[p] = o[p] * 1;
}
}
return ats;
}
}));

263
src/kute-bezier.js
View file

@ -6,71 +6,107 @@
* Licensed under MIT-License
*/
KUTE.Ease = {};
// /* THIS IS THE OLD CODE */
// (function(kute_ea){
// // Obtain a reference to the base KUTE.
// // Since KUTE supports a variety of module systems,
// // we need to pick up which one to use.
// if(define == "function") {
// define(["./kute.js"], function(KUTE){ kute_ea(KUTE); return KUTE; });
// } else if(typeof module == "object" && typeof require == "function") {
// // We assume, that require() is sync.
// var KUTE = require("./kute.js");
// kute_ea(KUTE);
// // Export the modified one. Not really required, but convenient.
// module.exports = KUTE;
// } else if(typeof window.KUTE != "undefined") {
// kute_ea(window.KUTE);
// } else {
// throw new Error("KUTE.js Bezier/Easing depends on KUTE.js. Read the docs for more info.")
// }
// })(function(KUTE){
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
// Browser globals
window.KUTE.Ease = window.KUTE.Ease || factory(KUTE);
} else {
throw new Error("Bezier Easing functions depend on KUTE.js. Read the docs for more info.");
}
}( function (KUTE) {
'use strict';
var E = E || {};
KUTE.Ease.bezier = function(mX1, mY1, mX2, mY2) {
E.Bezier = function(mX1, mY1, mX2, mY2) {
return _bz.pB(mX1, mY1, mX2, mY2);
};
var _bz = KUTE.Ease.bezier.prototype;
};
// These values are established by empiricism with tests (tradeoff: performance VS precision)
_bz.ni = 4; // NEWTON_ITERATIONS
_bz.nms = 0.001; // NEWTON_MIN_SLOPE
_bz.sp = 0.0000001; // SUBDIVISION_PRECISION
_bz.smi = 10, // SUBDIVISION_MAX_ITERATIONS
var _bz = E.Bezier.prototype;
_bz.ksts = 11; // k Spline Table Size
_bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
// These values are established by empiricism with tests (tradeoff: performance VS precision)
_bz.ni = 4; // NEWTON_ITERATIONS
_bz.nms = 0.001; // NEWTON_MIN_SLOPE
_bz.sp = 0.0000001; // SUBDIVISION_PRECISION
_bz.smi = 10, // SUBDIVISION_MAX_ITERATIONS
_bz.f32as = 'Float32Array' in window; // float32ArraySupported
_bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
_bz.ksts = 11; // k Spline Table Size
_bz.ksss = 1.0 / (_bz.ksts - 1.0); // k Sample Step Size
_bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
_bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
_bz.C = function(aA1) { return 3.0 * aA1; };
_bz.f32as = 'Float32Array' in window; // float32ArraySupported
_bz.msv = _bz.f32as ? new Float32Array (_bz.ksts) : new Array (_bz.ksts); // m Sample Values
_bz.r = {};
_bz.pB = function (mX1, mY1, mX2, mY2) {
this._p = false; var self = this;
_bz.A = function(aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; };
_bz.B = function(aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; };
_bz.C = function(aA1) { return 3.0 * aA1; };
_bz.r = function(aX){
if (!self._p) _bz.pc(mX1, mX2, mY1, mY2);
if (mX1 === mY1 && mX2 === mY2) return aX;
_bz.r = {};
_bz.pB = function (mX1, mY1, mX2, mY2) {
this._p = false; var self = this;
if (aX === 0) return 0;
if (aX === 1) return 1;
return _bz.cB(_bz.gx(aX, mX1, mX2), mY1, mY2);
};
return _bz.r;
};
_bz.r = function(aX){
if (!self._p) _bz.pc(mX1, mX2, mY1, mY2);
if (mX1 === mY1 && mX2 === mY2) return aX;
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
_bz.cB = function(aT, aA1, aA2) { // calc Bezier
if (aX === 0) return 0;
if (aX === 1) return 1;
return _bz.cB(_bz.gx(aX, mX1, mX2), mY1, mY2);
};
return _bz.r;
};
// Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
_bz.cB = function(aT, aA1, aA2) { // calc Bezier
return ((_bz.A(aA1, aA2)*aT + _bz.B(aA1, aA2))*aT + _bz.C(aA1))*aT;
};
};
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
_bz.gS = function (aT, aA1, aA2) { // getSlope
// Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
_bz.gS = function (aT, aA1, aA2) { // getSlope
return 3.0 * _bz.A(aA1, aA2)*aT*aT + 2.0 * _bz.B(aA1, aA2) * aT + _bz.C(aA1);
};
};
_bz.bS = function(a, aA, aB, mX1, mX2) { // binary Subdivide
_bz.bS = function(a, aA, aB, mX1, mX2) { // binary Subdivide
var x, t, i = 0, j = _bz.sp, y = _bz.smi;
do {
t = aA + (aB - aA) / 2.0;
x = _bz.cB(t, mX1, mX2) - a;
if (x > 0.0) {
aB = t;
} else {
aA = t;
}
t = aA + (aB - aA) / 2.0;
x = _bz.cB(t, mX1, mX2) - a;
if (x > 0.0) {
aB = t;
} else {
aA = t;
}
} while (Math.abs(x) > j && ++i < y);
return t;
};
};
_bz.nri = function (aX, agt, mX1, mX2) { // newton Raphs on Iterate
var i = 0, j = _bz.ni;
_bz.nri = function (aX, agt, mX1, mX2) { // newton Raphs on Iterate
var i = 0, j = _bz.ni;
for (i; i < j; ++i) {
var cs = _bz.gS(agt, mX1, mX2);
if (cs === 0.0) return agt;
@ -78,82 +114,85 @@ var i = 0, j = _bz.ni;
agt -= x / cs;
}
return agt;
};
};
_bz.csv = function (mX1, mX2) { // calc Sample Values
var i = 0, j = _bz.ksts;
for (i; i < j; ++i) {
_bz.msv[i] = _bz.cB(i * _bz.ksss, mX1, mX2);
}
};
_bz.csv = function (mX1, mX2) { // calc Sample Values
var i = 0, j = _bz.ksts;
for (i; i < j; ++i) {
_bz.msv[i] = _bz.cB(i * _bz.ksss, mX1, mX2);
}
};
_bz.gx = function (aX,mX1,mX2) { //get to X
var iS = 0.0, cs = 1, ls = _bz.ksts - 1;
_bz.gx = function (aX,mX1,mX2) { //get to X
var iS = 0.0, cs = 1, ls = _bz.ksts - 1;
for (; cs != ls && _bz.msv[cs] <= aX; ++cs) {
iS += _bz.ksss;
}
--cs;
for (; cs != ls && _bz.msv[cs] <= aX; ++cs) {
iS += _bz.ksss;
}
--cs;
// Interpolate to provide an initial guess for t
var dist = (aX - _bz.msv[cs]) / (_bz.msv[cs+1] - _bz.msv[cs]),
gt = iS + dist * _bz.ksss,
ins = _bz.gS(gt, mX1, mX2),
fiS = iS + _bz.ksss;
// Interpolate to provide an initial guess for t
var dist = (aX - _bz.msv[cs]) / (_bz.msv[cs+1] - _bz.msv[cs]),
gt = iS + dist * _bz.ksss,
ins = _bz.gS(gt, mX1, mX2),
fiS = iS + _bz.ksss;
if (ins >= _bz.nms) {
return _bz.nri(aX, gt, mX1, mX2);
} else if (ins === 0.0) {
return gt;
} else {
return _bz.bS(aX, iS, fiS, mX1, mX2);
}
};
if (ins >= _bz.nms) {
return _bz.nri(aX, gt, mX1, mX2);
} else if (ins === 0.0) {
return gt;
} else {
return _bz.bS(aX, iS, fiS, mX1, mX2);
}
};
_bz.pc = function(mX1, mX2, mY1, mY2) {
this._p = true;
if (mX1 != mY1 || mX2 != mY2)
_bz.csv(mX1, mX2);
};
// predefined bezier based easings, can be accessed via string, eg 'easeIn' or 'easeInOutQuart'
// _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo","slowMo","slowMo1","slowMo2"],
KUTE.Ease.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
KUTE.Ease.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
KUTE.Ease.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
KUTE.Ease.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
KUTE.Ease.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
KUTE.Ease.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
_bz.pc = function(mX1, mX2, mY1, mY2) {
this._p = true;
if (mX1 != mY1 || mX2 != mY2)
_bz.csv(mX1, mX2);
};
KUTE.Ease.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
KUTE.Ease.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
KUTE.Ease.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
// predefined bezier based easings, can be accessed via string, eg 'easeIn' or 'easeInOutQuart'
// _easings = ["linear","easeInQuad","easeOutQuad","easeInOutQuad","easeInCubic","easeOutCubic","easeInOutCubic","easeInQuart","easeInQuart","easeOutQuart","easeInOutQuart","easeInQuint","easeOutQuint","easeInOutQuint","easeInExpo","easeOutExpo","easeInOutExpo","slowMo","slowMo1","slowMo2"],
E.easeIn = function(){ return _bz.pB(0.42, 0.0, 1.00, 1.0); };
E.easeOut = function(){ return _bz.pB(0.00, 0.0, 0.58, 1.0); };
E.easeInOut = function(){ return _bz.pB(0.50, 0.16, 0.49, 0.86); };
KUTE.Ease.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
KUTE.Ease.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
KUTE.Ease.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
E.easeInSine = function(){ return _bz.pB(0.47, 0, 0.745, 0.715); };
E.easeOutSine = function(){ return _bz.pB(0.39, 0.575, 0.565, 1); };
E.easeInOutSine = function(){ return _bz.pB(0.445, 0.05, 0.55, 0.95); };
KUTE.Ease.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
KUTE.Ease.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
KUTE.Ease.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
E.easeInQuad = function () { return _bz.pB(0.550, 0.085, 0.680, 0.530); };
E.easeOutQuad = function () { return _bz.pB(0.250, 0.460, 0.450, 0.940); };
E.easeInOutQuad = function () { return _bz.pB(0.455, 0.030, 0.515, 0.955); };
KUTE.Ease.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
KUTE.Ease.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
KUTE.Ease.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
KUTE.Ease.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
KUTE.Ease.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
KUTE.Ease.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
E.easeInCubic = function () { return _bz.pB(0.55, 0.055, 0.675, 0.19); };
E.easeOutCubic = function () { return _bz.pB(0.215, 0.61, 0.355, 1); };
E.easeInOutCubic = function () { return _bz.pB(0.645, 0.045, 0.355, 1); };
KUTE.Ease.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
KUTE.Ease.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
KUTE.Ease.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
E.easeInQuart = function () { return _bz.pB(0.895, 0.03, 0.685, 0.22); };
E.easeOutQuart = function () { return _bz.pB(0.165, 0.84, 0.44, 1); };
E.easeInOutQuart = function () { return _bz.pB(0.77, 0, 0.175, 1); };
KUTE.Ease.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
KUTE.Ease.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
KUTE.Ease.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
E.easeInQuint = function(){ return _bz.pB(0.755, 0.05, 0.855, 0.06); };
E.easeOutQuint = function(){ return _bz.pB(0.23, 1, 0.32, 1); };
E.easeInOutQuint = function(){ return _bz.pB(0.86, 0, 0.07, 1); };
KUTE.Ease.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
KUTE.Ease.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
KUTE.Ease.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
E.easeInExpo = function(){ return _bz.pB(0.95, 0.05, 0.795, 0.035); };
E.easeOutExpo = function(){ return _bz.pB(0.19, 1, 0.22, 1); };
E.easeInOutExpo = function(){ return _bz.pB(1, 0, 0, 1); };
E.easeInCirc = function(){ return _bz.pB(0.6, 0.04, 0.98, 0.335); };
E.easeOutCirc = function(){ return _bz.pB(0.075, 0.82, 0.165, 1); };
E.easeInOutCirc = function(){ return _bz.pB(0.785, 0.135, 0.15, 0.86); };
E.easeInBack = function(){ return _bz.pB(0.600, -0.280, 0.735, 0.045); };
E.easeOutBack = function(){ return _bz.pB(0.175, 0.885, 0.320, 1.275); };
E.easeInOutBack = function(){ return _bz.pB(0.68, -0.55, 0.265, 1.55); };
E.slowMo = function(){ return _bz.pB(0.000, 0.500, 1.000, 0.500); };
E.slowMo1 = function(){ return _bz.pB(0.000, 0.700, 1.000, 0.300); };
E.slowMo2 = function(){ return _bz.pB(0.000, 0.900, 1.000, 0.100); };
return E;
}));

176
src/kute-css.js Normal file
View file

@ -0,0 +1,176 @@
/* KUTE.js - The Light Tweening Engine
* package CSS Plugin
* by dnp_theme
* Licensed under MIT-License
*/
(function(factory){
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if(typeof window.KUTE != "undefined") {
factory(KUTE);
} else {
throw new Error("CSS Plugin require KUTE.js.")
}
})(function(KUTE){
var K = window.KUTE, p,
_br = K.property('borderRadius'), _brtl = K.property('borderTopLeftRadius'), _brtr = K.property('borderTopRightRadius'),
_brbl = K.property('borderBottomLeftRadius'), _brbr = K.property('borderBottomRightRadius'), // all radius props prefixed
_cls = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
_rd = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
_bm = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
'padding', 'margin', 'paddingTop','paddingBottom', 'paddingLeft', 'paddingRight', 'marginTop','marginBottom', 'marginLeft', 'marginRight',
'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'], // dimensions / box model
_tp = ['fontSize','lineHeight','letterSpacing','wordSpacing'], // text properties
_clp = ['clip'], _bg = ['backgroundPosition'], // clip | background position
_mg = _rd.concat(_bm,_tp), // a merge of all properties with px|%|em|rem|etc unit
_all = _cls.concat(_clp, _rd, _bm, _tp, _bg), al = _all.length,
_d = _d || {}; //all properties default values
//populate default values object
for ( var i=0; i< al; i++ ){
p = _all[i];
if (_cls.indexOf(p) !== -1){
_d[p] = 'rgba(0,0,0,0)'; // _d[p] = {r:0,g:0,b:0,a:1};
} else if ( _mg.indexOf(p) !== -1 ) {
_d[p] = 0;
} else if ( _bg.indexOf(p) !== -1 ){
_d[p] = [50,50];
} else if ( p === 'clip' ){
_d[p] = [0,0,0,0];
}
}
// create prepare/render functions for additional colors properties
for (var i = 0, l = _cls.length; i<l; i++) {
p = _cls[i];
K.pp[p] = function(p,v) {
if ( (!(p in K.dom)) ) {
K.dom[p] = function(w,p,v) {
var _c = {};
for (var c in w._vE[p].value) {
if ( c !== 'a' ){
_c[c] = parseInt(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v )||0;
} else {
_c[c] = (w._vS[p].value[c] && w._vE[p].value[c]) ? parseFloat(w._vS[p].value[c] + (w._vE[p].value[c] - w._vS[p].value[c]) * v) : null;
}
}
if ( w._hex ) {
w._el.style[p] = K.rth( _c.r, _c.g, _c.b );
} else {
w._el.style[p] = !_c.a || _isIE8 ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';
}
};
}
return K.pp.cls(p,v);
};
K.prS[p] = function(el,p,v){
return K.gCS(el,p) || _d[p];
};
}
// create prepare/render functions for additional box model properties
for (var i = 0, l = _mg.length; i<l; i++) {
p = _mg[i];
K.pp[p] = function(p,v){
if ( (!(p in K.dom)) ) {
K.dom[p] = function(w,p,v) {
w._el.style[p] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
};
}
return K.pp.box(p,v);
};
K.prS[p] = function(el,p,v){
return K.gCS(el,p) || _d[p];
};
}
//create prepare/render functions for radius properties
for (var i = 0, l = _rd.length; i<l; i++) {
p = _rd[i];
K.pp[p] = function(p,v){
if ( (!(p in K.dom)) ) {
if (p === 'borderRadius') {
K.dom[p] = function(w,p,v) {
w._el.style[_br] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
};
} else if (p === 'borderTopLeftRadius') {
K.dom[p] = function(w,p,v) {
w._el.style[_brtl] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
};
} else if (p === 'borderTopRightRadius') {
K.dom[p] = function(w,p,v) {
w._el.style[_brtr] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
};
} else if (p === 'borderBottomLeftRadius') {
K.dom[p] = function(w,p,v) {
w._el.style[_brbl] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
};
} else if (p === 'borderBottomRightRadius') {
K.dom[p] = function(w,p,v) {
w._el.style[_brbr] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v ) + w._vE[p].unit;
};
}
}
return K.pp.box(p,v);
};
K.prS[p] = function(el,p,v){
return K.gCS(el,p) || _d[p];
};
}
// clip
K.pp['clip'] = function(p,v){
if ( !(p in K.dom) ) {
K.dom[p] = function(w,p,v) {
var h = 0, cl = [];
for (h;h<4;h++){
var c1 = w._vS[p][h].v, c2 = w._vE[p][h].v, cu = w._vE[p][h].u || 'px';
cl[h] = ((c1 + ( c2 - c1 ) * v)) + cu;
}
w._el.style[p] = 'rect('+cl+')';
};
}
if ( v instanceof Array ){
return [ K.truD(v[0]), K.truD(v[1]), K.truD(v[2]), K.truD(v[3]) ];
} else {
var ci = v.replace(/rect|\(|\)/g,'');
ci = /\,/g.test(ci) ? ci.split(/\,/g) : ci.split(/\s/g);
return [ K.truD(ci[0]), K.truD(ci[1]), K.truD(ci[2]), K.truD(ci[3]) ];
}
};
K.prS['clip'] = function(el,p,v){
var c = K.gCS(el,p), w = K.gCS(el,'width'), h = K.gCS(el,'height');
return !/rect/.test(c) ? [0, w, h, 0] : c;
};
// background position
K.pp['backgroundPosition'] = function(p,v) {
if ( !(p in K.dom) ) {
K.dom[p] = function(w,p,v) {
var px1 = w._vS[p].x.v, px2 = w._vE[p].x.v, py1 = w._vS[p].y.v, py2 = w._vE[p].y.v,
px = (px1 + ( px2 - px1 ) * v), pxu = '%', py = (py1 + ( py2 - py1 ) * v), pyu = '%';
w._el.style[p] = px + pxu + ' ' + py + pyu;
};
}
if ( v instanceof Array ){
return { x: K.truD(v[0])||{ v: 50, u: '%' }, y: K.truD(v[1])||{ v: 50, u: '%' } };
} else {
var posxy = v.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50), xp, yp;
posxy = /\,/g.test(posxy) ? posxy.split(/\,/g) : posxy.split(/\s/g); posxy = posxy.length === 2 ? posxy : [posxy[0],50];
xp = K.truD(posxy[0]); yp = K.truD(posxy[1]);
return { x: xp, y: yp };
}
}
K.prS['backgroundPosition'] = function(el,p,v){
return K.gCS(el,p) || _d[p];
}
return this;
});

75
src/kute-jquery.js
View file

@ -1,26 +1,49 @@
/* KUTE.js - The Light Tweening Engine
* package jQuery Plugin
* by dnp_theme
* Licensed under MIT-License
*/
(function($) {
$.fn.KUTE = function( method, start, end, ops ) { // method can be Animate(), fromTo(), to(), stop(), start(), chain(), pause()
var tws = [], i, l = this.length;
for (i=0;i<l;i++){
var mt = this[i][method];
if ( typeof mt === 'function' ) {
mt.apply(this[i]);
}
if ( method === 'to' ) {
tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops
} else if ( method === 'fromTo' || method === 'Animate' ) {
tws.push( new KUTE[method]( this[i], start, end, ops ) );
} else if ( method === 'chain' ) {
this[i].chain.apply(this[i],start);
}
}
return tws;
};
})(jQuery);
/* KUTE.js - The Light Tweening Engine
* package jQuery Plugin
* by dnp_theme
* Licensed under MIT-License
*/
(function(factory){
// We need to require the root KUTE and jQuery.
if (typeof define === 'function' && define.amd) {
define(["./kute.js", "jquery"], function(KUTE, $){
factory($, KUTE);
return KUTE;
});
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
var $ = require("jquery");
// Export the modified one. Not really required, but convenient.
module.exports = factory($, KUTE);
} else if (typeof window.KUTE !== "undefined" && (typeof window.$ !== 'undefined' || typeof window.jQuery !== 'undefined' ) ) {
// jQuery always has two ways of existing... Find one, and pass.
var $ = window.jQuery || window.$, KUTE = window.KUTE;
$.fn.KUTE = factory($, KUTE);
} else {
throw new Error("jQuery plugin for KUTE.js depends on KUTE.js and jQuery. Read the docs for more info.");
}
})(function($, KUTE) {
'use strict';
var $K = function( method, start, end, ops ) { // method can be fromTo(), to(), stop(), start(), chain(), pause()
var tws = [], i, l = this.length;
for (i=0;i<l;i++){
var mt = this[i][method];
if ( typeof mt === 'function' ) {
mt.apply(this[i]);
}
if ( method === 'to' ) {
tws.push( new KUTE[method]( this[i], start, end ) ); // here start is end and end is ops
} else if ( method === 'fromTo' || method === 'Animate' ) {
tws.push( new KUTE[method]( this[i], start, end, ops ) );
} else if ( method === 'chain' ) {
this[i].chain.apply(this[i],start);
}
}
return tws;
};
return $K;
});

518
src/kute-physics.js
View file

@ -2,187 +2,205 @@
* KUTE.js - The Light Tweening Engine | dnp_theme
* package dynamics.js easings pack by Michael Villar
* https://github.com/michaelvillar/dynamics.js
* optimized by dnp_theme 2015 – MIT License
* optimized by dnp_theme 2015 – MIT License
* Licensed under MIT-License
*/
KUTE.Physics = {};
var _kp = KUTE.Physics, _hPI = Math.PI / 2;
// spring easing
_kp.spring = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300 ) / 20),
fc = Math.pow(20, (options.friction || 200 ) / 100),
aSt = options.anticipationStrength || 0,
aS = (options.anticipationSize || 0) / 1000;
_kps.run = function(t) {
var A, At, a, angle, b, frictionT, y0, yS;
frictionT = (t / (1 - aS)) - (aS / (1 - aS));
if (t < aS) {
yS = (aS / (1 - aS)) - (aS / (1 - aS));
y0 = (0 / (1 - aS)) - (aS / (1 - aS));
b = Math.acos(1 / _kps.A1(t,yS));
a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
A = _kps.A1;
} else {
A = _kps.A2;
b = 0;
a = 1;
}
At = A(frictionT,aS,aSt,fc);
angle = fq * (t - aS) * a + b;
return 1 - (At * Math.cos(angle));
};
return _kps.run;
};
(function(factory){
// Obtain a reference to the base KUTE.
// Since KUTE supports a variety of module systems,
// we need to pick up which one to use.
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if(typeof window.KUTE != "undefined") {
window.KUTE.Physics = window.KUTE.Physics || factory(KUTE);
} else {
throw new Error("Physics Easing functions for KUTE.js depend on KUTE.js. Read the docs for more info.")
}
})(function(KUTE){
'use strict';
var P = P || {}, _hPI = Math.PI / 2;
var _kps = _kp.spring.prototype;
_kps.run = {};
_kps.A1 = function(t,aS,aSt) {
var a, b, x0, x1;
x0 = aS / (1 - aS);
x1 = 0;
b = (x0 - (0.8 * x1)) / (x0 - x1);
a = (0.8 - b) / x0;
return (a * t * aSt / 100) + b;
};
_kps.A2 = function(t,aS,aSt,f) {
return Math.pow(f / 10, -t) * (1 - t);
};
// spring easing
P.spring = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300 ) / 20),
fc = Math.pow(20, (options.friction || 200 ) / 100),
aSt = options.anticipationStrength || 0,
aS = (options.anticipationSize || 0) / 1000;
// bounce
_kp.bounce = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300) / 20),
f = Math.pow(20, (options.friction || 200) / 100);
_kpo.run = function(t) {
var At = Math.pow(f / 10, -t) * (1 - t),
angle = fq * t * 1 + _hPI;
return At * Math.cos(angle);
};
return _kpo.run;
};
_kps.run = function(t) {
var A, At, a, angle, b, frictionT, y0, yS;
var _kpo = _kp.bounce.prototype;
_kpo.run = {};
// gravity
_kp.gravity = function(options) {
var bounciness, curves, elasticity, gravity, initialForce;
options = options || {};
bounciness = ( options.bounciness || 400 ) / 1250;
elasticity = ( options.elasticity || 200 ) / 1000;
initialForce = options.initialForce || false;
gravity = 100;
curves = [];
_kpg.L = (function() {
var b, curve;
b = Math.sqrt(2 / gravity);
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
while (curve.H > 0.001) {
_kpg.L = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + _kpg.L * bounciness,
H: curve.H * bounciness * bounciness
};
}
return curve.b;
})();
(function() {
var L2, b, curve, _results;
b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L));
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
curves.push(curve);
L2 = _kpg.L;
_results = [];
while (curve.b < 1 && curve.H > 0.001) {
L2 = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + L2 * bounciness,
H: curve.H * elasticity
};
_results.push(curves.push(curve));
}
return _results;
})();
_kpg.fn = function(t) {
var curve, i, v;
i = 0;
curve = curves[i];
while (!(t >= curve.a && t <= curve.b)) {
i += 1;
curve = curves[i];
if (!curve) {
break;
frictionT = (t / (1 - aS)) - (aS / (1 - aS));
if (t < aS) {
yS = (aS / (1 - aS)) - (aS / (1 - aS));
y0 = (0 / (1 - aS)) - (aS / (1 - aS));
b = Math.acos(1 / _kps.A1(t,yS));
a = (Math.acos(1 / _kps.A1(t,y0)) - b) / (fq * (-aS));
A = _kps.A1;
} else {
A = _kps.A2;
b = 0;
a = 1;
}
}
if (!curve) {
v = initialForce ? 0 : 1;
} else {
v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L);
}
return v;
At = A(frictionT,aS,aSt,fc);
angle = fq * (t - aS) * a + b;
return 1 - (At * Math.cos(angle));
};
return _kps.run;
};
return _kpg.fn;
};
var _kpg = _kp.gravity.prototype;
_kpg.L = {};
_kpg.fn = {};
_kpg.getPointInCurve = function(a, b, H, t, o, L) {
var c, t2;
L = b - a;
t2 = (2 / L) * t - 1 - (a * 2 / L);
c = t2 * t2 * H - H + 1;
if (o.initialForce) {
c = 1 - c;
}
return c;
};
//throw up and pull down by gravity
_kp.forceWithGravity = function(o) {
var ops = o || {};
ops.initialForce = true;
return _kp.gravity(ops);
};
var _kps = P.spring.prototype;
_kps.run = {};
_kps.A1 = function(t,aS,aSt) {
var a, b, x0, x1;
x0 = aS / (1 - aS);
x1 = 0;
b = (x0 - (0.8 * x1)) / (x0 - x1);
a = (0.8 - b) / x0;
return (a * t * aSt / 100) + b;
};
_kps.A2 = function(t,aS,aSt,f) {
return Math.pow(f / 10, -t) * (1 - t);
};
// multi point bezier
_kp.bezier = function(options) {
options = options || {};
var points = options.points,
returnsToSelf = false, Bs = [];
// bounce
P.bounce = function(options) {
options = options || {};
var fq = Math.max(1, (options.frequency || 300) / 20),
f = Math.pow(20, (options.friction || 200) / 100);
_kpo.run = function(t) {
var At = Math.pow(f / 10, -t) * (1 - t),
angle = fq * t * 1 + _hPI;
return At * Math.cos(angle);
};
return _kpo.run;
};
var _kpo = P.bounce.prototype;
_kpo.run = {};
// gravity
P.gravity = function(options) {
var bounciness, curves, elasticity, gravity, initialForce;
options = options || {};
bounciness = ( options.bounciness || 400 ) / 1250;
elasticity = ( options.elasticity || 200 ) / 1000;
initialForce = options.initialForce || false;
gravity = 100;
curves = [];
_kpg.L = (function() {
var b, curve;
b = Math.sqrt(2 / gravity);
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
while (curve.H > 0.001) {
_kpg.L = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + _kpg.L * bounciness,
H: curve.H * bounciness * bounciness
};
}
return curve.b;
})();
(function() {
var L2, b, curve, _results;
b = Math.sqrt(2 / (gravity * _kpg.L * _kpg.L));
curve = {
a: -b,
b: b,
H: 1
};
if (initialForce) {
curve.a = 0;
curve.b = curve.b * 2;
}
curves.push(curve);
L2 = _kpg.L;
_results = [];
while (curve.b < 1 && curve.H > 0.001) {
L2 = curve.b - curve.a;
curve = {
a: curve.b,
b: curve.b + L2 * bounciness,
H: curve.H * elasticity
};
_results.push(curves.push(curve));
}
return _results;
})();
_kpg.fn = function(t) {
var curve, i, v;
i = 0;
curve = curves[i];
while (!(t >= curve.a && t <= curve.b)) {
i += 1;
curve = curves[i];
if (!curve) {
break;
}
}
if (!curve) {
v = initialForce ? 0 : 1;
} else {
v = _kpg.getPointInCurve(curve.a, curve.b, curve.H, t, options, _kpg.L);
}
return v;
};
return _kpg.fn;
};
var _kpg = P.gravity.prototype;
_kpg.L = {};
_kpg.fn = {};
_kpg.getPointInCurve = function(a, b, H, t, o, L) {
var c, t2;
L = b - a;
t2 = (2 / L) * t - 1 - (a * 2 / L);
c = t2 * t2 * H - H + 1;
if (o.initialForce) {
c = 1 - c;
}
return c;
};
//throw up and pull down by gravity
P.forceWithGravity = function(o) {
var ops = o || {};
ops.initialForce = true;
return P.gravity(ops);
};
// multi point bezier
P.bezier = function(options) {
options = options || {};
var points = options.points,
returnsToSelf = false, Bs = [];
(function() {
var i, k;
@ -207,96 +225,98 @@ _kp.bezier = function(options) {
}
};
return _kpb.run;
};
var _kpb = _kp.bezier.prototype;
_kpb.B2 = {};
_kpb.run = {};
_kpb.fn = function(pointA, pointB, Bs) {
var B2 = function(t) {
return _kpb.Bezier(t, pointA, pointA.cp[pointA.cp.length - 1], pointB.cp[0], pointB);
};
return Bs.push(B2);
};
_kpb.Bezier = function(t, p0, p1, p2, p3) {
return {
x: (Math.pow(1 - t, 3) * p0.x) + (3 * Math.pow(1 - t, 2) * t * p1.x) + (3 * (1 - t) * Math.pow(t, 2) * p2.x) + Math.pow(t, 3) * p3.x,
y: (Math.pow(1 - t, 3) * p0.y) + (3 * Math.pow(1 - t, 2) * t * p1.y) + (3 * (1 - t) * Math.pow(t, 2) * p2.y) + Math.pow(t, 3) * p3.y
var _kpb = P.bezier.prototype;
_kpb.B2 = {};
_kpb.run = {};
_kpb.fn = function(pointA, pointB, Bs) {
var B2 = function(t) {
return _kpb.Bezier(t, pointA, pointA.cp[pointA.cp.length - 1], pointB.cp[0], pointB);
};
return Bs.push(B2);
};
};
_kpb.yForX = function(xTarget, Bs, rTS) {
var B, aB, i, lower, percent, upper, x, xT, _i = 0, _len = Bs.length;
B = null;
for (_i; _i < _len; _i++) {
aB = Bs[_i];
if (xTarget >= aB(0).x && xTarget <= aB(1).x) {
B = aB;
_kpb.Bezier = function(t, p0, p1, p2, p3) {
return {
x: (Math.pow(1 - t, 3) * p0.x) + (3 * Math.pow(1 - t, 2) * t * p1.x) + (3 * (1 - t) * Math.pow(t, 2) * p2.x) + Math.pow(t, 3) * p3.x,
y: (Math.pow(1 - t, 3) * p0.y) + (3 * Math.pow(1 - t, 2) * t * p1.y) + (3 * (1 - t) * Math.pow(t, 2) * p2.y) + Math.pow(t, 3) * p3.y
};
};
_kpb.yForX = function(xTarget, Bs, rTS) {
var B, aB, i, lower, percent, upper, x, xT, _i = 0, _len = Bs.length;
B = null;
for (_i; _i < _len; _i++) {
aB = Bs[_i];
if (xTarget >= aB(0).x && xTarget <= aB(1).x) {
B = aB;
}
if (B !== null) {
break;
}
}
if (B !== null) {
break;
}
}
if (!B) {
if (!B) {
return ( rTS ? 0 : 1 );
}
xT = 0.0001; // xTolerance
lower = 0; upper = 1;
percent = (upper + lower) / 2;
x = B(percent).x; i = 0;
while (Math.abs(xTarget - x) > xT && i < 100) {
if (xTarget > x) {
lower = percent;
} else {
upper = percent;
}
xT = 0.0001; // xTolerance
lower = 0; upper = 1;
percent = (upper + lower) / 2;
x = B(percent).x;
i++;
}
return B(percent).y;
};
_kp.physicsInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] });
};
x = B(percent).x; i = 0;
while (Math.abs(xTarget - x) > xT && i < 100) {
if (xTarget > x) {
lower = percent;
} else {
upper = percent;
}
percent = (upper + lower) / 2;
x = B(percent).x;
i++;
}
return B(percent).y;
};
_kp.physicsIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
};
P.physicsInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] } ] });
};
_kp.physicsOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] });
};
P.physicsIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0.92 - (friction / 1000), y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 1, y: 1 } ] } ] });
};
_kp.physicsBackOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}] });
};
P.physicsOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [ { x: 0, y: 0, cp: [ { x: 0, y: 0 } ] }, { x: 1, y: 1, cp: [ { x: 0.08 + (friction / 1000), y: 1 } ] }] });
};
_kp.physicsBackIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}] });
};
P.physicsBackOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0,"y":0}]},{"x":1,"y":1,"cp":[{"x":0.735+(friction/1000),"y":1.3}]}] });
};
_kp.physicsBackInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return _kp.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.68-(friction / 1000),"y":-0.55}]},{"x":1,"y":1,"cp":[{"x":0.265+(friction / 1000),"y":1.45}]}] });
};
P.physicsBackIn = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.28-(friction / 1000),"y":-0.6}]},{"x":1,"y":1,"cp":[{"x":1,"y":1}]}] });
};
P.physicsBackInOut = function(options) {
var friction;
options = options || {};
friction = options.friction|| 500;
return P.bezier({ points: [{"x":0,"y":0,"cp":[{"x":0.68-(friction / 1000),"y":-0.55}]},{"x":1,"y":1,"cp":[{"x":0.265+(friction / 1000),"y":1.45}]}] });
};
return P;
});

292
src/kute-svg.js Normal file
View file

@ -0,0 +1,292 @@
/* KUTE.js - The Light Tweening Engine
* package - SVG Plugin
* desc - draw strokes, morph paths and SVG color props
* by dnp_theme
* Licensed under MIT-License
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
// We assume, that require() is sync.
var KUTE = require("./kute.js");
// Export the modified one. Not really required, but convenient.
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
// Browser globals
window.KUTE.svg = window.KUTE.svg || factory(KUTE);
} else {
throw new Error("SVG Plugin require KUTE.js.");
}
}( function (KUTE) {
'use strict';
var K = window.KUTE, S = S || {}, p,
_svg = document.getElementsByTagName('path')[0],
_ns = _svg && _svg.ownerSVGElement && _svg.ownerSVGElement.namespaceURI || 'http://www.w3.org/2000/svg',
_nm = ['strokeWidth', 'strokeOpacity', 'fillOpacity', 'stopOpacity'], // numeric SVG CSS props
_cls = ['fill', 'stroke', 'stopColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
trm = function(s){ if (!String.prototype.trim) { return s.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''); } else { return s.trim(); }};
if (_svg && !_svg.ownerSVGElement) {return;} // if SVG API is not supported, return
// SVG MORPH
// get path d attribute or create a path with string value
S.getPath = function(e){
var p = {}, el = typeof e === 'object' ? e : /^\.|^\#/.test(e) ? document.querySelector(e) : null;
if ( el && /path|glyph/.test(el.tagName) ) {
p.e = S.forcePath(el);
p.o = el.getAttribute('d');
} else if (!el && /[a-z][^a-z]*/ig.test(e)) { // maybe it's a string path already
var np = S.createPath(trm(e));
p.e = np;
p.o = e;
}
return p;
}
S.pathCross = function(w){
// path tween options
this._mpr = w.morphPrecision || 25;
this._midx = w.morphIndex;
this._smi = w.showMorphInfo;
this._rv1 = w.reverseFirstPath;
this._rv2 = w.reverseSecondPath;
var p1 = S.getOnePath(w._vS.path.o), p2 = S.getOnePath(w._vE.path.o), arr;
arr = S._pathCross(p1,p2);
w._vS.path.d = arr[0];
w._vE.path.d = arr[1];
}
S._pathCross = function(s,e){
s = S.createPath(s); e = S.createPath(e);
var arr = S.getSegments(s,e,this._mpr), s1 = arr[0], e1 = arr[1], arL = e1.length, idx;
// reverse arrays
if (this._rv1) { s1.reverse(); }
if (this._rv2) { e1.reverse(); }
// determine index for best/minimum distance between points
if (this._smi) { idx = S.getBestIndex(s1,e1); }
// shift second array to for smallest tween distance
if (this._midx) {
var e11 = e1.splice(this._midx,arL-this._midx);
e1 = e11.concat(e1);
}
// the console.log helper utility
if (this._smi) {
console.log( 'KUTE.js Path Morph Log\nThe morph used ' + arL + ' points to draw both paths based on '+this._mpr+' morphPrecision value.\n'
+ (this._midx ? 'You\'ve configured the morphIndex to ' + this._midx + ' while the recommended is ' + idx+ '.\n' : 'You may also consider a morphIndex for the second path. Currently the best index seems to be ' + idx + '.\n')
+ (
!this._rv1 && !this._rv2 ? 'If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.' :
'You\'ve chosen that the first path to have ' + ( this._rv1 ? 'REVERSED draw direction, ' : 'UNCHANGED draw direction, ') + 'while second path is to be ' + (this._rv2 ? 'REVERSED.\n' : 'UNCHANGED.\n')
)
);
}
s = e = null;
return [s1,e1]
}
S.getSegments = function(s,e,r){
var s1 = [], e1 = [], le1 = s.getTotalLength(), le2 = e.getTotalLength(), ml = Math.max(le1,le2),
d = r, ar = ml / r, j = 0, sl = ar*r; // sl = sample length
// populate the points arrays based on morphPrecision as sample size
while ( (j += r) < sl ) {
s1.push( [s.getPointAtLength(j).x, s.getPointAtLength(j).y]);
e1.push( [e.getPointAtLength(j).x, e.getPointAtLength(j).y]);
}
return [s1,e1];
}
S.getBestIndex = function(s,e){
var s1 = S.clone(s), e1 = S.clone(e), d = [], i, r = [], l = s1.length, t, ax, ay;
for (i=0; i<l; i++){
t = e1.splice(i,l-i); e1 = t.concat(e1);
ax = Math.abs(s1[i][0] - e1[i][0]);
ay = Math.abs(s1[i][1] - e1[i][1]);
d.push( Math.sqrt( ax * ax + ay * ay ) );
r.push( e1 );
e1 = []; e1 = S.clone(e); t = null;
}
return d.indexOf(Math.min.apply(null,d));
}
S.getOnePath = function(p){
var a = p.split(/z/i);
if (a.length > 2) {
return trm(a[0]) + 'z';
} else { return trm(p); }
}
S.createPath = function (p){
var c = document.createElementNS(_ns,'path'), d = typeof p === 'object' ? p.getAttribute('d') : p;
c.setAttribute('d',d); return c;
}
S.forcePath = function(p){
if (p.tagName === 'glyph') { // perhaps we can also change other SVG tags in the future
var c = S.createPath(p); p.parentNode.appendChild(c); return c;
}
return p;
}
S.clone = function(obj) {
var copy;
// Handle Array
if (obj instanceof Array) {
copy = [];
for (var i = 0, len = obj.length; i < len; i++) {
copy[i] = S.clone(obj[i]);
}
return copy;
}
// Handle Object
if (obj instanceof Object) {
copy = {};
for (var attr in obj) {
if (obj.hasOwnProperty(attr)) {
copy[attr] = S.clone(obj[attr]);
}
}
return copy;
}
return obj;
}
// register the render SVG path object
// process path object and also register the render function
K.pp['path'] = function(a,o,l) {
if (!('path' in K.dom)) {
K.dom['path'] = function(w,p,v){
var curve =[], i, l;
for(i=0,l=w._vE.path.d.length;i<l;i++) { // for each point
curve[i] = [];
for(var j=0;j<2;j++) { // each point coordinate
curve[i].push(w._vS.path.d[i][j]+(w._vE.path.d[i][j]-w._vS.path.d[i][j])*v);
}
}
w._el.setAttribute("d", v === 1 ? w._vE.path.o : 'M' + curve.join('L') + 'Z' );
}
}
return S.getPath(o);
};
K.prS['path'] = function(el,p,v){
return el.getAttribute('d');
};
// SVG DRAW
S.getDraw = function(e,v){
var l = e.getTotalLength(), start, end, d, o;
if ( v instanceof Object ) {
return v;
} else if (typeof v === 'string') {
v = v.split(/\,|\s/);
start = /%/.test(v[0]) ? S.percent(trm(v[0]),l) : parseFloat(v[0]);
end = /%/.test(v[1]) ? S.percent(trm(v[1]),l) : parseFloat(v[1]);
} else if (typeof v === 'undefined') {
o = parseFloat(K.gCS(e,'strokeDashoffset'));
d = K.gCS(e,'strokeDasharray').split(/\,/);
start = 0-o;
end = parseFloat(d[0]) + start || l;
}
return { s: start, e: end, l: l }
};
S.percent = function(v,l){
return parseFloat(v) / 100 * l;
};
// register the draw
K.pp['draw'] = function(a,o,l){
if (!('draw' in K.dom)) {
K.dom['draw'] = function(w,p,v){
var l, s, e, o;
l = w._vS.draw.l;
s = w._vS.draw.s+(w._vE.draw.s-w._vS.draw.s)*v;
e = w._vS.draw.e+(w._vE.draw.e-w._vS.draw.e)*v;
o = 0 - s;
w._el.style.strokeDashoffset = o +'px';
w._el.style.strokeDasharray = e+o<1 ? '0px, ' + l + 'px' : (e+o) + 'px, ' + l + 'px';
}
}
return S.getDraw(l,o);
}
K.prS['draw'] = function(el,p,v){
return S.getDraw(el)
}
// SVG CSS Properties
for ( var i = 0, l = _cls.length; i< l; i++) {
p = _cls[i];
K.pp[p] = function(p,v){
if (!(p in K.dom)) {
K.dom[p] = function(w,p,v){
var _c = {};
for (var c in w._vE[p]) {
if ( c !== 'a' ){
_c[c] = parseInt(w._vS[p][c] + (w._vE[p][c] - w._vS[p][c]) * v )||0;
} else {
_c[c] = (w._vS[p][c] && w._vE[p][c]) ? parseFloat(w._vS[p][c] + (w._vE[p][c] - w._vS[p][c]) * v) : null;
}
}
if ( w._hex ) {
w._el.style[p] = K.rth( _c.r, _c.g, _c.b );
} else {
w._el.style[p] = !_c.a ? 'rgb(' + _c.r + ',' + _c.g + ',' + _c.b + ')' : 'rgba(' + _c.r + ',' + _c.g + ',' + _c.b + ',' + _c.a + ')';
}
}
}
return K.truC(v);
}
K.prS[p] = function(el,p,v){
return K.gCS(el,p) || 'rgba(0,0,0,0)';
}
}
for ( var i = 0, l = _nm.length; i< l; i++) { // for numeric CSS props SVG related
p = _nm[i];
if (p === 'strokeWidth'){
K.pp[p] = function(p,v){
if (!(p in K.dom)) {
K.dom[p] = function(w,p,v) {
w._el.style[p] = (w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v) + w._vS[p].unit;
}
}
return K.pp.box(p,v);
}
} else {
K.pp[p] = function(p,v){
if (!(p in K.dom)) {
K.dom[p] = function(w,p,v) {
w._el.style[p] = w._vS[p].value + (w._vE[p].value - w._vS[p].value) * v;
}
}
return K.pp.unl(p,v);
}
}
K.prS[p] = function(el,p,v){
return K.gCS(el,p) || 0;
}
}
return S;
}));

1664
src/kute.js
View file

File diff suppressed because it is too large Load diff

145
start.html Normal file
View file

@ -0,0 +1,145 @@
<!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">
<meta name="description" content="A quick start guide for KUTE.js, CDN sources, NPM.">
<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 -->
<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 -->
<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="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="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>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.5.0/kute.min.js">&lt;/script> &lt;!-- core KUTE.js --></code></pre>
<p>Also you can 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.5.0/kute-jquery.min.js">&lt;/script> &lt;!-- jQuery Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-easing.min.js">&lt;/script> &lt;!-- Bezier Easing Functions -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-physics.min.js">&lt;/script> &lt;!-- Physics Easing Functions -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-css.min.js">&lt;/script> &lt;!-- CSS Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.0/kute-svg.min.js">&lt;/script> &lt;!-- SVG Plugin -->
&lt;script src="https://cdn.jsdelivr.net/kute.js/1.5.0/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>
<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 @thednp 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></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.0.0/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- some stuff -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

370
svg.html Normal file
View file

@ -0,0 +1,370 @@
<!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 gte IE 10 | !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">
<meta name="description" content="The SVG Plugin for KUTE.js enables animation for path morphing, drawing stroke, as well as some SVG specific CSS properties.">
<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 -->
<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 -->
<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 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="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="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 CSS properties specific to SVG elements as well as morphing path shapes. 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>.</p>
<h3>Shape Morphing</h3>
<p>One of the most important parts of the plugin is the shape 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>). The plugin is packed with specific tween options to help you improve the morph animation:</p>
<ul>
<li><kbd>showMorphInfo: true</kbd> when <code>true</code> the script will log valuable information about the morph such as default/current sample size, number of points based on sample size, the recommended index for points rotation, or if one of the shapes require to be reversed. By default this option is <code>false</code> for serious performance reasons.</li>
<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 25 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
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();
// 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>
<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" >
<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"/>
<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 open the console, and this time we'll pass in the <code>showMorphInfo: true</code> tween option that will help us find the best possible morph as performance and visual. Have a look:</p>
<pre><code class="language-javascript">// let's check the morph info again
var tween = KUTE.to('#rectangle', { path: '#star' }, {showMorphInfo: true}).start();
// The console log should show you this
/* ------------------------------------
KUTE.js Path Morph Log
The morph used 92 points to draw both paths based on 25 morphPrecision value.
You may also consider a morphIndex for the second path. Currently the best index seems to be 79.
If the current animation is not satisfactory, consider reversing one of the paths. Maybe the paths do not intersect or they really have different draw directions.
*/
</code></pre>
<p>Next, we're going to set the <code>morphIndex: 79</code> and we will get an improved morph.</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 <code>morphIndex</code> value, maybe you can get an even better or more interesting morph.</p>
<h4>Multi Path Example</h4>
<p>In other cases, you may want to morph multiple paths at the same time. 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"/>
&lt;/svg>
</code></pre>
<p>As you can see, both these paths have additional 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;/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: w11 to w24, w13 to w21, w14 to w22 and w12 to w23.</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 few minutes of 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" class="bg-red" 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" class="bg-orange" 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" class="bg-green" 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" class="bg-blue" 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>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. In that 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. So without further talking, let's get into it:</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 513 513">
<path id="rectangle-container" 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"/>
<path id="symbol-left" class="bg-light" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"/>
<path id="symbol-left-clone" class="bg-light" d="M155.889 333.394h-55.632c-3.351 0-5.854-1.504-7.271-3.792-1.467-2.379-1.542-5.464 0-8.534l59.11-104.313c0.063-0.114 0.063-0.19 0-0.316l-37.615-65.116c-1.556-3.098-1.783-6.157-0.316-8.534 1.417-2.301 4.235-3.477 7.586-3.477h55.632c8.535 0 12.72 5.499 15.489 10.431 0 0 38.020 66.33 38.249 66.696-2.252 3.97-60.059 106.21-60.059 106.21-2.844 5.131-6.852 10.745-15.173 10.745z"/>
<path id="symbol-right" class="bg-lime" d="M418.956 75.269l-123.176 217.79c-0.075 0.115-0.075 0.255 0 0.367l78.431 143.295c1.556 3.084 1.593 6.221 0.113 8.597-1.415 2.288-4.033 3.552-7.383 3.552h-55.57c-8.522 0-12.783-5.663-15.54-10.596 0 0-78.848-144.646-79.050-145.023 3.944-6.98 123.797-219.523 123.797-219.523 2.984-5.362 6.587-10.596 14.894-10.596h56.203c3.351 0 5.981 1.265 7.396 3.553 1.466 2.376 1.428 5.511-0.115 8.584z"/>
<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 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 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 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"/>
</svg>
<div class="example-buttons">
<a id="compliMorphBtn" class="btn btn-red" href="javascript:void(0)">Start</a>
</div>
</div>
<p>While there are other tools such as <a href="http://alexk111.github.io/SVG-Morpheus/" target="_blank">SVGMorpheus</a> to enable this kind of multi-path morph, they lack in options to improve the visual and performance. The demos look acceptable in most cases, but the SVGs were manually prepared/optimized which makes it pretty much unusable on a broader horizon. Again, 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 better solution.</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>Faster animation speed could be a great trick to hide any polygonal "artefacts".</li>
<li>Always use the <code>showMorphInfo:true</code> tween option to check how the values required for the morph change with every new option value, but <strong>never forget to disable it</strong> after you have optimized the morph to your liking, this option enables a function that detects the best index for points rotation that is very expensive and delays the animation for quite some time.</li>
</ul>
<h3>Drawing Stroke</h3>
<p>Next, we're going to animate the stroke of a <code>&lt;path></code> element, as this type of animation only works with this kind of SVG elements because it's the only one that supports the <code>.getTotalLength()</code> method. 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 class="example-box-model example-box" id="draw-example" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 513 513">
<path fill="none" style="stroke:#2196F3; stroke-width:10; stroke-dashoffset: -724.077px; stroke-dasharray: 0px, 1448.15px" id="drawSVG" d="M432 64l-240 240-112-112-80 80 192 192 320-320z"/>
</svg>
<div class="example-buttons">
<a id="drawBtn" class="btn btn-blue" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Remember: the <code>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>CSS Properties</h3>
<p>As you probably noticed in the above examples we've animated the background color for some of the shapes, that is <code>fill</code>, one of the properties supported by the SVG Plugin, so let's create some tweens real quick:</p>
<pre><code class="language-javascript">// fill HEX/RGBa
var tween1 = KUTE.to('selector', {fill: '#069'});
// fillOpacity Number 0-1
var tween2 = KUTE.to('selector',{fillOpacity: 0.2});
// stroke HEX/RGBa
var tween3 = KUTE.to('selector',{stroke: 'rgba(00,66,99,0.8)'});
// strokeOpacity Number 0-1
var tween4 = KUTE.to('selector',{strokeOpacity: 0.6});
// strokeWidth Number
var tween5 = KUTE.to('selector',{strokeWidth: 10});
</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 615 615">
<path class="bg-orange" id="fillSVG" style="stroke-width: 110px; stroke: #FF5722; transform: scale(0.85) translate(60px,60px); -webkit-transform: scale(0.85) translate(60px,60px);" 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"/>
</svg>
<div class="example-buttons">
<a id="cssBtn" class="btn btn-orange" href="javascript:void(0)">Start</a>
</div>
</div>
<p>Now let's have a look at gradients, here we can animate the <code>stopColor</code> defined within the SVG's <code>&lt;linearGradient&gt;</code> element.</p>
<pre><code class="language-markup">&lt;linearGradient id="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
&lt;stop offset="0%" style="stop-color: #ffd626; stop-opacity:1">&lt;/stop>
&lt;!-- our tween object targets the element below -->
&lt;stop id="myStopColor" offset="100%" style="stop-color: #FF5722; stop-opacity:1">&lt;/stop>
&lt;/linearGradient>
</code></pre>
<pre><code class="language-javascript">// stopColor HEX/RGBa
var tween6 = KUTE.to('#myStopColor',{stopColor: 'rgb(00,66,99)'});
</code></pre>
<p>Same as above, for <code>stopOpacity</code> we also target the right element defined within the SVG's <code>&lt;linearGradient&gt;</code> element.</p>
<pre><code class="language-markup">&lt;linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
&lt;stop offset="0%" style="stop-color: #2196F3; stop-opacity:1">&lt;/stop>
&lt;!-- our tween object targets the element below -->
&lt;stop id="myStopOpacity" offset="100%" style="stop-color: #e91b1f; stop-opacity:1">&lt;/stop>
&lt;/linearGradient>
</code></pre>
<pre><code class="language-javascript">// stopOpacity Number 0-1
var tween7 = KUTE.to('#myStopOpacity',{stopOpacity: 0.2});
</code></pre>
<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="gradient1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: #ffd626; stop-opacity:1"></stop>
<stop id="stopCSVG" offset="100%" style="stop-color: #FF5722; stop-opacity:1"></stop>
</linearGradient>
</defs>
<path fill="url(#gradient1)" 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"/>
</svg>
<svg class="example-box-model example-box" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 615 615">
<defs>
<linearGradient id="gradient2" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color: #2196F3; stop-opacity:1"></stop>
<stop id="stopOSVG" offset="100%" style="stop-color: #e91b1f; stop-opacity:1"></stop>
</linearGradient>
</defs>
<path fill="url(#gradient2)" 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"/>
</svg>
<div class="example-buttons">
<a id="gradBtn" class="btn btn-yellow" href="javascript:void(0)">Start</a>
</div>
</div>
<p>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.</p>
</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/0.9.2/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- some stuff -->
<script src="./src/kute-svg.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>