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

Changes:

Browse source 
* Now all parseProperty functions and prepareStart functions are bound to `this`, the tween object
* changed the Tween constructor for lighter size
* rewritten alot of code for readability
* Documentation updates
This commit is contained in:
thednp 2016-11-30 18:12:11 +02:00
parent 1cf5f87f82
commit 4f7682cdca
25 changed files with 130 additions and 136 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
about.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="About KUTE.js performance, also about the KUTE.js project, code and a short glossary with most used terminology in Javascript animation.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,about kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
@ -98,8 +98,9 @@
<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>While the code execution is the <strong>fastest</strong> for the <em>layout modifiers</em> or what we call <em>box-model</em>, say the <code>position</code> based properties set such as <code>left</code> or <code>top</code>, they may force the entire page layout to change if not absolutelly positioned and thus requires the browser to repaint all elements affected by animated repositioning and their parent elements. On the other side <code>translate</code> doesn't trigger a repaint but involves more complex operations such as more object traversing, string concatenation or check for certain conditions to be met. All of this is because <code>translate</code> is part of <code>transform</code> CSS3 property that has to stack in a single line many more properties such as <code>rotate</code>, <code>skew</code> and <code>scale</code>. <a href="http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/" target="_blank">An article</a> by Paul Irish explains more about differences in performance between position and translation.</p>
<p>Also any transform property is sub-pixel enabled and requires one or more decimals for accurate and smooth animation, decreasing overall performance. That said and with the emerging high resolution displays, it's safe to speculate that at least translation could be optimized by rounding the values, while scale, rotation and skew requires three decimals.</p>
<p><span class="ion-android-plane media"></span>To put it short <code>left</code> executes faster but requires repaint on every frame while <code>translateX</code> or <code>translate3d</code> execute slower but require no repaint on each animation frame. The <strong>winner</strong> is <kbd>left</kbd>, when it comes to code execution speed, but if we also count the elements' size, the larger size the more favor the translation so the <strong>overall winner</strong> is <kbd>translate</kbd>. The more pixels to recompose in the layout, the more time spent on each frame, and this is why translation is better in most cases, and animated positioning is best to be used as fallback animation for legacy browsers.</p>
<h3>Translate, TranslateX and Translate3D</h3>

64
api.html
View file

@ -8,43 +8,43 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="A detailed API documentation on KUTE.js public methods on how to create tween objects or how to control the tween animation.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,public methods,tween control,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<title>KUTE.js Developer API | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<!-- 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>
@ -53,7 +53,7 @@
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
@ -64,7 +64,7 @@
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
@ -84,7 +84,7 @@
<div class="content-wrap">
<h2>Public Methods</h2>
<p>These methods allow you to create <strong>tween objects</strong> and collections of <strong>tween objects</strong>; as we know, a tween object is essentially like an animation setup for a given HTML element, defining CSS properties, animation duration, repeat or other options. The methods have different uses and performance scores while making it easy to work with.</p>
<h3>Single Tween Object</h3>
<p>As the heading suggests, the following two methods allow you to create tween objects for individual HTML elements, except when used in combination with jQuery and the KUTE.js plugin for jQuery, where, as jQuery always does, it always works with collections of elements.</p>
<p><kbd>.to()</kbd> method is the most simple method which allows you to create tween objects for animating CSS properties from a specific default value OR from current/computed value TO a desired value.
@ -92,13 +92,13 @@
<p>Considering a given <em>div</em> element is already transparent, a super quick example would be:</p>
<pre><code class="language-javascript">KUTE.to(div,{opacity:1}).start()</code></pre>
<p>As you might have guessed, this method is useful for creating simple animations such as for scroll, hide/reveal elements, or generally when you don't know the current value of the property you are trying to animate.</p>
<p><kbd>.fromTo()</kbd> method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest method but unlike the <code>.to()</code> method, it does not stack transform properties on chained tweens. Along with the performance advantage, you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the <a href="features.html">features page</a>. Here's a quick example:</p>
<p><kbd>.fromTo()</kbd> method is the best way to build animations for BEST performance and absolute control. The tests prove this method to be the fastest method but unlike the <code>.to()</code> method, it does not stack transform properties on chained tweens. Along with the performance advantage, you can set measurement units for both starting and end values, to avoid glitches. We've talked about this in the <a href="features.html">features page</a>. Here's a quick example:</p>
<pre><code class="language-javascript">KUTE.fromTo(div,{opacity:1},{opacity:0}).start()</code></pre>
<h3>Tween Object Collections</h3>
<p>The two new methods allow you to create animations for multiple HTML elements at the same time, all in a single line of code. They use the above methods to create a tween object for each element of the collection and also enable the tween control methods in this new context.</p>
<p>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,
<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();
@ -107,7 +107,7 @@ 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>
<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>
@ -118,7 +118,7 @@ var myDivsTweens = KUTE.allTo( myDivs, {opacity:1}, {offset: 200, duration: 5
<p>These methods allows you to control when the animation starts or stops. Let's write a basic tween object to work with the methods:</p>
<pre><code class="language-javascript">var tween = KUTE.fromTo(div,{opacity:1},{opacity:0});</code></pre>
<p>This tween object is now ready to work with the methods.</p>
<h3 id="start">Starting Animations</h3>
<p><kbd>.start()</kbd> method starts animation for a given tween object. It can start the animation for both cached and non-cached objects. Unlike previous versions of KUTE.js, where animation started immediately after tween object creation, now you have to manually start them. This method also applies to arrays of tween objects created with <code>.allTo()</code> and <code>.allFromTo()</code> methods.</p>
<pre><code class="language-javascript">//cached object defined above
@ -135,7 +135,7 @@ KUTE.allFromTo(divs,{opacity:1},{opacity:0}).start();
KUTE.allTo(divs,{opacity:0}).start();
</code></pre>
<p>As you can see, you can also set a time for the animation to start, example: <code>tween.start(myTimeValue)</code>. Having access to the method is useful when starting animation for large amounts of elements with same properties at the same time because using it properly <strong>eliminates any syncronization issue</strong> that may occur on animations start, even if you are using the <code>.to()</code> method. The trick is super duper simple:</p>
<p>As you can see, you can also set a time for the animation to start, example: <code>tween.start(myTimeValue)</code>. Having access to the method is useful when starting animation for large amounts of elements with same properties at the same time because using it properly <strong>eliminates any syncronization issue</strong> that may occur on animations start, even if you are using the <code>.to()</code> method. The trick is super duper simple:</p>
<pre><code class="language-javascript">// step 1 - create an empty array and grab the elements to animate
var tweens = [], myElements = document.querySelector('.myManyElements'), numberOfElements = myElements.length;
@ -151,7 +151,7 @@ for (var i = 0; i < numberOfElements; i++) {
// first we need the exact current time
var now = window.performance.now(); // this returns the exact current time in numeric format
// also we estimate/calculate an adjustment lag
// also we estimate/calculate an adjustment lag
// depending on the number of the elements AND hardware capability
// maybe (numberOfElements / 16) would be an accurate value for PCs
var lag = 100; // number of miliseconds for the script to built tween objects for all elements
@ -161,9 +161,9 @@ for (var i = 0; i < numberOfElements; i++) {
tweens[i].start(now+lag);
}
</code></pre>
<p>In other cases the new methods <code>.allTo()</code> and <code>.allFromTo()</code> can be more useful.</p>
<h3>Stopping Animation</h3>
<p><kbd>.stop()</kbd> method stops animation for a given tween object or an array of tween objects (built with <code>.to()</code>/<code>.fromTo()</code> methods) while animating. You cannot stop the animation for tween objects created on the fly, only for cached objects. Let's assume that for the given tween we decide to stop the animation via <code>click</code> action:</p>
<pre><code class="language-javascript">// for a tween object
@ -171,21 +171,21 @@ stopButton.addEventListener('click', function(){
myTween.stop(); // myMultiTweens.stop();
}, false);
</code></pre>
<h3>Pausing Animation</h3>
<p><kbd>.pause()</kbd> method freezez the animation at any given time for a given tween object or collection, and unlike the <code>.stop()</code> method, this one allows resuming the animation on a later use of the next method <code>.play()</code>.</p>
<pre><code class="language-javascript">pauseButton.addEventListener('click', function(){
tween.pause(); // or myMultiTweens.pause();
}, false);
</code></pre>
<h3>Resuming Paused Animation</h3>
<p><kbd>.play()</kbd> or <kbd>.resume()</kbd> methods allows you to resume an animation for a given tween object or collection of tweens, only if it was paused or else will produce no effect.</p>
<p><kbd>.play()</kbd> or <kbd>.resume()</kbd> methods allows you to resume an animation for a given tween object or collection of tweens, only if it was paused or else will produce no effect.</p>
<pre><code class="language-javascript">playButton.addEventListener('click', function(){
tween.play(); // or tween.resume(); || or myMultiTweens.resume();
}, false);
</code></pre>
<h3>Chaining Tweens</h3>
<p><kbd>.chain()</kbd> method can be used to chain tweens together. When the animation finishes for a given tween, it triggers the animation start for another tween.</p>
<pre><code class="language-javascript">var tween2 = KUTE.fromTo(div,{left:50},{left:0});
@ -221,7 +221,7 @@ tween2.chain(tweensCollection2.tweens);
</code></pre>
</div>
<div class="content-wrap">
<div class="content-wrap">
<ul id="share" class="nav">
<li>Share </li>
@ -229,9 +229,9 @@ tween2.chain(tweensCollection2.tweens);
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute_js animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
@ -241,15 +241,15 @@ tween2.chain(tweensCollection2.tweens);
</footer>
</div><!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.6.0/kute.min.js"></script> KUTE CDN -->

16
assets/css/kute.css
View file

@ -19,6 +19,10 @@ body > .fill {
position: fixed; top: 0; left:0; right: 0; bottom:0;
}
/* the body and it's children can be irresponsive on scroll animations as well */
body[data-tweening="scroll"],
body[data-tweening="scroll"] * { pointer-events: none !important; }
.fill {
background-size: cover;
background-position: 50% 50%;
@ -112,22 +116,24 @@ svg.example-box { width: auto; height: auto; }*/
.example-buttons {position: absolute; top: 18px; right:0}
/* text properties example */
:not(.ie8) .btn.example-item {opacity: 0}
h1.example-item {
font-size: 50px;
line-height:50px;
color: #333;
opacity: 0;
}
h1.example-item span {
line-height: inherit;
opacity: 0; display: inline;
display: inline;
vertical-align: top;
}
.btn.example-item {opacity: 0}
.ie8 h1.example-item span,
.ie8 .btn.example-item {filter: alpha(opacity=0)}
.ie8 .btn.example-item * {filter: inherit}
.ie8 h1.example-item,
.ie8 .btn.example-item {filter: alpha(opacity=0); }
.ie8 .btn.example-item {display: block; padding:0; text-align: center; }
/* UTILITY STYLES
-------------------------------------------------- */

52
assets/js/css.js
View file

@ -59,48 +59,28 @@ var textProperties = document.getElementById('textProperties'),
chars = heading.innerHTML.split('');
// wrap the splits into spans and build an object with these spans
heading.innerHTML = '<span>' + chars.join('</span><span>') + '</span>';
heading.innerHTML = '<span style="filter: alpha(opacity:0)">' + 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 = [];
var buttonTween = KUTE.fromTo(button,
{width: 150, opacity:0, height: 70, lineHeight:70, fontSize: 40},
{width: 100, opacity:1, height: 35, lineHeight:35, fontSize: 20}),
headingTween = KUTE.fromTo(heading, {opacity:0}, {opacity:1}),
tps = KUTE.allFromTo(charsObject,
{ height: 50, fontSize:80, letterSpacing: 20},
{ height: 35, fontSize:50, letterSpacing: 0},
{ offset: 250, duration: 500, easing: 'easingCubicOut'});
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();
}
}
tps.tweens[tps.tweens.length-1].chain(buttonTween);
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();
if (!headingTween.playing && !tps.playing ) {
if (isIE8) { button.style.filter ="alpha(opacity=0)"; heading.style.filter ="alpha(opacity=0)"; } else { button.style.opacity = ''; heading.style.opacity = ''; }
headingTween.start();
tps.start();
}
},false);
/* TEXT PROPERTIES EXAMPLE */
@ -158,10 +138,10 @@ clpbtn.addEventListener('click', function(e){
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'});
bpTween = 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();
!bpTween.playing && bpTween.start();
},false);
/* BACKGROUND POSITION EXAMPLE */

5
assets/js/examples.js
View file

@ -175,12 +175,13 @@ var element = document.getElementById("myElement");
var startValues = {}, endValues = {}, options = {};
// here we define properties that are commonly supported
startValues.opacity = 1; endValues.opacity = 0.1;
startValues.backgroundColor = '#ffd626'; endValues.backgroundColor = '#ec1e71';
startValues.backgroundColor = 'rgba(255,214,38,1)'; endValues.backgroundColor = 'rgba(236,30,113,0.1)';
// here we define the properties according to the target browsers
if (isIE8) { // or any other browser that doesn"t support transforms
startValues.opacity = 1; endValues.opacity = 0.1;
startValues.left = 0; endValues.left = 250;
startValues.backgroundColor = '#ffd626'; endValues.backgroundColor = '#ec1e71';
} else if (isIE9) { // or any other browser that only support 2d transforms
startValues.translate = 0; endValues.translate = 250; // 2d translate on X axis
startValues.rotate = 0; endValues.rotate = 180; // 2d rotation on Z axis

6
assets/js/kute-bs.js
View file

@ -26,7 +26,7 @@
// add a reference to KUTE utilities
prepareStart = K.prepareStart, parseProperty = K.parseProperty,
property = K.property, getCurrentStyle = K.getCurrentStyle, trueColor = K.truC,
DOM = g.dom, unit = g._unit, color = g._color, // interpolation functions
DOM = K.dom, unit = g.Interpolate.unit, color = g.Interpolate.color, // interpolation functions
// the preffixed boxShadow property, mostly for legacy browsers
// maybe the browser is supporting the property with its vendor preffix
@ -60,8 +60,8 @@
// for the .to() method, you need to prepareStart the boxShadow property
// which means you need to read the current computed value
prepareStart['boxShadow'] = function(element,property,value){
var cssBoxShadow = getCurrentStyle(element,_boxShadow);
prepareStart.boxShadow = function(property,value){
var cssBoxShadow = getCurrentStyle(this.element,_boxShadow);
return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow;
}

13
assets/js/perf.js
View file

@ -4,7 +4,7 @@
var mobileType = '',
isMobile = {
Windows: function() {
var checkW = /IEMobile/i.test(navigator.userAgent);
var checkW = /IEMobile|Windows Mobile/i.test(navigator.userAgent);
mobileType += checkW ? 'Windows Phones.' : '';
return checkW;
},
@ -24,7 +24,7 @@ var mobileType = '',
return checkI;
},
any: function() {
return ( isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Windows());
return ( isMobile.Windows() || isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() );
}
},
checkMOBS = isMobile.any();
@ -63,11 +63,11 @@ function complete(){
}
function updateLeft(){
this.div.style['left'] = parseInt(this.left)+'px';
this.div.style['left'] = Math.floor(this.left) +'px';
}
function updateTranslate(){
this.div.style[transformProperty] = 'translate3d('+ Math.round(this.x * 100) / 100 + 'px,0px,0px)';
this.div.style[transformProperty] = 'translate3d('+ Math.floor(this.x * 10) / 10 + 'px,0px,0px)';
}
function buildObjects(){
@ -193,7 +193,4 @@ for (var i=0; i<l; i++) {
b.setAttribute('data-'+link.parentNode.parentNode.parentNode.id, link.id);
}
}
}
}

2
attr.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="The Attributes Plugin for KUTE.js enables animation for any numeric presentation attribute.">
<meta name="keywords" content="kute,kute.js,animation,javascript animations,tweening engine,animation engine,presentation attributes,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">

8
css.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="The CSS Plugin for KUTE.js extends the core engine with additional box model properties, color properties, border-radius, text properties and others.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,css,css3,border-radius,border-color,clip,background-position,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
@ -141,11 +141,9 @@ var tween3 = KUTE.to('selector1',{wordSpacing:50});
<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 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>
<p>TIP: this should also work in Internet Explorer 8 as a fallback for scale animation for text. The above example uses some CSS hacks to enable opacity animation on IE8, so make sure to check <code>assets/css/css.css</code> file for more. This example is not perfect, as legacy browsers don't support the excellent transform functions with subpixel animations, but if it's a must, this would do. Download this example <a href='http://codepen.io/thednp/share/zip/bVqLpb/'>here</a>.</p>
<h3>Color Properties</h3>
<p>The next example is about animating all border color properties, since the core engine already supports text <code>color</code> and <code>backgroundColor</code> properties. So check these lines for reference.</p>

2
easing.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="A detailed API documentation on KUTE.js main methods, options and easing functions.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,easing,easing functions,cubic bezier easing,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">

19
examples.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="Animation examples for KUTE.js core engine with most essential CSS and CSS3 properties, as well as all easing functions.">
<meta name="keywords" content="kute,kute.js,animation,javscript animation,tweening engine,animation engine,css3 transform,box model,color,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
@ -280,6 +280,11 @@ KUTE.to('selector1',{backgroundColor:'turquoise'}).start(); // IE9+ only
<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
</code></pre>
<p>The scroll animation could however be influenced by mouse hover effects, usually creating some really nasty bottlenecks, but you can always add some CSS to your page to prevent that:</p>
<pre><code class="language-css">/* prevent scroll bottlenecks */
body[data-tweening="scroll"],
body[data-tweening="scroll"] * { pointer-events: none !important; }
</code></pre>
<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>
@ -308,15 +313,18 @@ var endValues = {};
var options = {};
// here we define properties that are commonly supported
startValues.opacity = 1;
endValues.opacity = 0.2;
startValues.backgroundColor = '#CDDC39';
endValues.backgroundColor = '#ec1e71';
startValues.backgroundColor = 'rgba(255,214,38,1)'; endValues.backgroundColor = 'rgba(236,30,113,0.1)';
// here we define the properties according to the target browsers
if (isIE8) { // or any other browser that doesn"t support transforms
startValues.left = 0;
endValues.left = 250;
// for IE we override color values
startValues.backgroundColor = '#CDDC39';
endValues.backgroundColor = '#ec1e71';
// IE8 also doesn't support RGBA, we set to animate the opacity of the element
startValues.opacity = 1;
endValues.opacity = 0.2;
} else if (isIE9) { // or any other browser that only support 2d transforms
startValues.translate = 0; // 2d translate on X axis
endValues.translate = 250;
@ -383,6 +391,7 @@ playPauseButton.addEventListener('click', function(e){
</div>
</div>
<p>Let's explain this code a bit. KUTE.js gives you the internal variables <code>myTween.playing</code> and <code>myTween.paused</code> (both true/false) to help you easily manage the tween control methods all together as in this example here. As said before, KUTE.js version 0.9.5 doesn't stat animating by default, for all the examples on this page you have to start it yourself, unlike their versions hosted on Codepen.</p>
<p>Also please know that opacity animation only works on Internet Explorer 8 if the target element uses <code>float: left/right</code>, <code>display: block</code> or <code>display: inline-block</code>.</p>
<ul>
<li>the <code class="bg-blue">START</code> button will use the <code>.start()</code> method and the animation starts;</li>
<li>the <code class="bg-red">STOP</code> button will use the <code>.stop()</code> method and stops the animation; after this the, animation can only be started again</li>

36
extend.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="A detailed guide how to extend or customize the functionality KUTE.js, with an example for a box-shadow plugin.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,extend,box-shadow animation,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
@ -129,11 +129,11 @@ Tween.prototype.timescale = function(factor){
// or let's add a reverse method
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
for (var p in this.valuesEnd) {
var tmp = this.valuesRepeat[p]; // we cache this object first
this.valuesRepeat[p] = this.valuesEnd[p];
this.valuesEnd[p] = tmp;
this.valuesStart[p] = this.valuesRepeat[p];
}
return this;
}
@ -168,7 +168,7 @@ Tween.prototype.onUpdate = function(){
<ul>
<li><code>KUTE.prepareStart['propertyName']</code> <kbd class="bg-red">required</kbd> a function to get the current value of the property required for the <code>.to()</code> method;</li>
<li><code>KUTE.parseProperty['propertyName']</code> <kbd class="bg-red">required</kbd> a function to process the user value / current value to have it ready to tween;</li>
<li><code>window.dom['propertyName']</code> <kbd class="bg-red">required</kbd> a <strong>domUpdate</strong> function that will update the property value into the DOM;</li>
<li><code>KUTE.dom['propertyName']</code> <kbd class="bg-red">required</kbd> a <strong>domUpdate</strong> function that will update the property value into the DOM;</li>
<li><code>KUTE.crossCheck['propertyName']</code> <kbd class="bg-green">optional</kbd> a function to help you set proper values when for instance startValues unit is different than endValues unit; so far this is used for CSS3/SVG transforms and SVG Morph, but it can be extended for many properties such as box-model properties or border-radius properties;</li>
<li>also <kbd class="bg-green">optional</kbd> additional functions that will help with value processing.</li>
</ul>
@ -178,7 +178,7 @@ var g = typeof global !== 'undefined' ? global : window, K = KUTE,
// add a reference to KUTE utilities
prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
property = K.property, parseProperty = K.parseProperty, trueColor = K.truC,
DOM = g.dom, color = g._color, unit = g._unit; // interpolation functions
DOM = K.dom, color = g.Interpolate.color, unit = g.Interpolate.unit; // interpolation functions
// the preffixed boxShadow property, mostly for legacy browsers
// maybe the browser is supporting the property with its vendor preffix
@ -193,19 +193,21 @@ var colRegEx = /(\s?(?:#(?:[\da-f]{3}){1,2}|rgba?\(\d{1,3},\s*\d{1,3},\s*\d{1,3}
<pre><code class="language-javascript">// for the .to() method, you need to prepareStart the boxShadow property
// which means you need to read the current computed value
// if the current computed value is not acceptable, use a default value
prepareStart['boxShadow'] = function(element,property,value){
var cssBoxShadow = getCurrentStyle(element,'boxShadow'); // where getCurrentStyle() is an accurate method to read the current property value
prepareStart['boxShadow'] = function(property,value){
var cssBoxShadow = getCurrentStyle(this.element,'boxShadow'); // where getCurrentStyle() is an accurate method to read the current property value
return /^none$|^initial$|^inherit$|^inset$/.test(cssBoxShadow) ? '0px 0px 0px 0px rgb(0,0,0)' : cssBoxShadow; // if the current value is not valid, use a default one
}
// note that in some cases the window.getComputedStyle(element,null) can be faster or more appropriate
// note that in some cases the window.getComputedStyle(this.element,null) can be faster or more appropriate
// we are using a hybrid function that's trying to get proper colors and other stuff
// some legacy browsers lack in matters of accuracy so the KUTE.js core methods would suffice
// also to read the current value of an attribute, replace first line of the above function body with this
// var attrValue = element.getAttribute(property);
// and return the value or a default value, mostly rgb(0,0,0) for colors, 1 for opacity, or 0 for most other types
</code></pre>
</code></pre>
<p>Since KUTE.js 1.6.0, the tween object is bound to all property parsing utilities, meaning that you have access to <code>this</code> that has the target element, options, start and end values and everything else. This is extremely useful if you want to optimize and/or extend particular properties values, the dom update functions, and even override the property name</p>
<p>Now we need an utility function that makes sure the structure looks right for the DOM update function.</p>
<pre><code class="language-javascript">// utility function to process values accordingly
@ -233,7 +235,7 @@ var processBoxShadowArray = function(shadow){
};
</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>window.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>
<p>Next we'll need to write a <code>parseProperty</code> function that will prepare the property value and build an Object or Array of values ready to tween. This function also registers the <code>KUTE.dom['boxShadow']</code> function into the KUTE object, and this way we avoid filling the main object with unnecessary functions, just to keep performance tight.</p>
<pre><code class="language-javascript">// the parseProperty for boxShadow
// registers the window.dom['boxShadow'] function
@ -312,10 +314,10 @@ var myBSTween3 = KUTE.fromTo('selector', {boxShadow: [5, 5, 0, '#069', 'inset']}
<li><kbd class="bg-lime">KUTE.truC(color)</kbd> a function that returns an <code>{r: 150, g: 150, b: 0}</code> color object ready to tween; if the color value is a <a href="http://www.w3schools.com/colors/colors_names.asp" target="_blank">web safe color</a>, the IE9+ browsers will be able to return the rgb object we need.</li>
<li><kbd class="bg-lime">KUTE.htr(hex)</kbd> a function that accepts HEX formatted colors and returns an <code>{r: 150, g: 150, b: 0}</code> color object;</li>
<li><kbd class="bg-lime">KUTE.rth(r,g,b)</kbd> a function that accepts numeric values for red, blue and green and returns a HEX format <code>#006699</code> color string.</li>
<li><kbd class="bg-lime">window._number</kbd> is most essential interpolation tool when developing plugins for various properties not supported in the core.</li>
<li><kbd class="bg-lime">window._unit</kbd> is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like <code>width: 250px</code></li>
<li><kbd class="bg-lime">window._color</kbd> is a very fast interpolation function for colors, as used in the above example.</li>
<li><kbd class="bg-lime">window._coords</kbd> is SVG Plugin only, but you can have a look anytime when you're out of ideas.</li>
<li><kbd class="bg-lime">Interpolate.number</kbd> is most essential interpolation tool when developing plugins for various properties not supported in the core.</li>
<li><kbd class="bg-lime">Interpolate.unit</kbd> is used mainly for box model properties, text properties, and generally anything that's a string based valued. Like <code>width: 250px</code></li>
<li><kbd class="bg-lime">Interpolate.color</kbd> is a very fast interpolation function for colors, as used in the above example.</li>
<li><kbd class="bg-lime">Interpolate.coords</kbd> is SVG Plugin only, but you can have a look anytime when you're out of ideas.</li>
</ul>
<ul id="share" class="nav">

2
features.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="An in-depth overview with all KUTE.js features, browser compatibility and performance.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,kute.js fetures,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">

4
index.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="KUTE.js is a minimal Javascript animation engine with outstanding performance and supporting 3D transforms, SVG Morph, draw SVG, SVG transform, cross-browser animation, scroll animation, CSS3 properties and many more.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,morph svg,draw svg,svg transform,css3,3d transform,scroll,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
@ -125,7 +125,7 @@
</div>
<div class="col2">
<h3>Prefix Free</h3>
<p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> for <code>transform</code> and <code>border-radius</code>, and allows you to work with the utilities yourself, hustle free with legacy browsers.</p>
<p>KUTE.js can detect if the user's browser requires prefix and <a href="features.html#prefix">uses it accordingly</a> mostly for <code>transform</code>, and even allows you to use the utilities yourself in your apps or your own plugins.</p>
</div>
</div>
<div class="columns hiddenoverflow">

2
options.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="KUTE.js tween options refference on most common options as well as property or plugin specific.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,kute.js tween options,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">

4
performance.html
View file

@ -4,7 +4,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<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">
@ -29,7 +29,7 @@
position: absolute;
}
.box { height: 200px }
#info {position: absolute; top: 0; left: 0; width: 400px;}
#info {position: absolute; top: 0; left: 0; width: 350px;}
.padding {padding: 20px}
.btn-group { margin-bottom: 15px; }
.btn {font-size: 13px; }

8
properties.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="The complete list of supported CSS properties, presentation attributes and other DOM animations for KUTE.js.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,css properties,css3 animation,kute.js supported properties,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
@ -137,7 +137,7 @@
<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>
<p>The <a href="css.html">CSS Plugin</a> covers all the radius properties with the exception that shorthand notations are not implemented.</p>
<ul>
<li><kbd class="bg-olive">borderRadius</kbd> allows you to animate the <code>border-radius</code> on all corners for a given element.</li>
<li><kbd class="bg-olive">borderTopLeftRadius</kbd> allows you to animate the <code>border-top-left-radius</code> for a given element.</li>
@ -161,8 +161,8 @@
<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>
<p>Starting KUTE.js 1.6.0 the <a href="attr.html">Attributes Plugin</a> can also animate color attributes such as <kbd class="bg-olive">stroke</kbd>, <kbd class="bg-olive">fill</kbd> or <kbd class="bg-olive">stop-color</kbd>, and they are removed from the SVG Plugin, and the reason for that is the new bundle build that incorporates both plugins into an unified file.<p>
<p>The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance <code>KUTE.to('selector', {attr:{width:150}})</code> is clearly different from <code>KUTE.to('selector', {width:150})</code> which is the the CSS property with the same name.</p>
<p>The plugin handles attribute namespaces properly which means you can use both Javascript notation (like <kbd class="bg-olive">stopColor</kbd>) and HTML markup notation (like <kbd class="bg-olive">'stop-color'</kbd>), see the below example.</p>
<p>EG: <code>KUTE.to('selector', {attr:{stroke:'blue'}})</code> to animate the stroke of an SVG element or <code>KUTE.to('selector', {attr:{'stop-color':'red'}})</code> to animate the stop color of some SVG gradient.</p>
@ -177,7 +177,7 @@
<p><strong>Remember</strong>: these properties are <strong>layout modifiers</strong>.</p>
<h3>Scroll Animation</h3>
<p>KUTE.js core engine currently supports only vertical <kbd class="bg-blue">scroll</kbd> for both the window and a given element that's scrollable (when <code>scrollHeight</code> is higher than <code>offsetHeight</code>). 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>
<p>KUTE.js core engine currently supports only vertical <kbd class="bg-blue">scroll</kbd> for both the window and a given element that's scrollable (when <code>scrollHeight</code> is higher than <code>offsetHeight</code>). EG: <code>scroll: 150</code> will scroll an element or window to 150px from top to bottom. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks, but we'll have a look at that later.</p>
<h3>String Properties</h3>
<ul>

2
src/kute-attr.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.99 | © dnp_theme | Attributes Plugin | MIT-License
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=r.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r._unit,r._number),l=r._color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e,r){var n={};for(var i in r){var o=v(i).replace(/_+[a-z]+/,""),u=c(t,o);n[o]=p.indexOf(o)!==-1?u||"rgba(0,0,0,0)":u||(/opacity/i.test(i)?1:0)}return n},u.attr=function(t,r,n){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var o={};for(var u in r){var b=v(u),d=c(n,b.replace(/_+[a-z]+/,""));if(p.indexOf(b)===-1)if(null!==d&&/(%|[a-z]+)$/.test(d)){var h=f(d).u||f(r[u]).u,y=/%/.test(h)?"_percent":"_"+h;b+y in e||(/%/.test(h)?e[b+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,Math.floor(100*s(r.v,n.v,i))/100+n.u)}:e[b+y]=function(t,e,r,n,i){var o=o||e.replace(y,"");t.setAttribute(o,Math.floor(s(r.v,n.v,i))+n.u)}),o[b+y]=f(r[u])}else/(%|[a-z]+)$/.test(r[u])&&null!==d&&(null===d||/(%|[a-z]+)$/.test(d))||(b in e||(/opacity/i.test(u)?e[b]=function(t,e,r,n,i){t.setAttribute(e,Math.floor(100*s(r,n,i))/100)}:e[b]=function(t,e,r,n,i){t.setAttribute(e,Math.floor(10*s(r,n,i))/10)}),o[b]=parseFloat(r[u]));else b in e||(e[b]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),o[b]=a(r[u])}return o},this});
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Attributes Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e,r="undefined"!=typeof global?global:window,n=t,i=n.dom,o=n.prepareStart,u=n.parseProperty,a=n.truC,f=n.truD,s=(n.crossCheck,r.Interpolate.unit,r.Interpolate.number),l=r.Interpolate.color,c=function(t,e){return t.getAttribute(e)},p=["fill","stroke","stop-color"],v=function(t){return t.replace(/[A-Z]/g,"-$&").toLowerCase()};return o.attr=function(t,e){var r={};for(var n in e){var i=v(n).replace(/_+[a-z]+/,""),o=c(this.element,i);r[i]=p.indexOf(i)!==-1?o||"rgba(0,0,0,0)":o||(/opacity/i.test(n)?1:0)}return r},u.attr=function(t,r){"attr"in i||(i.attr=function(t,e,r,n,o){for(var u in n)i.attributes[u](t,u,r[u],n[u],o)},e=i.attributes={});var n={};for(var o in r){var u=v(o),b=/(%|[a-z]+)$/,d=c(this.element,u.replace(/_+[a-z]+/,""));if(p.indexOf(u)===-1)if(null!==d&&b.test(d)){var y=f(d).u||f(r[o]).u,A=/%/.test(y)?"_percent":"_"+y;u+A in e||(/%/.test(y)?e[u+A]=function(t,e,r,n,i){var o=o||e.replace(A,"");t.setAttribute(o,(100*s(r.v,n.v,i)>>0)/100+n.prefix)}:e[u+A]=function(t,e,r,n,i){var o=o||e.replace(A,"");t.setAttribute(o,(s(r.v,n.v,i)>>0)+n.prefix)}),n[u+A]=f(r[o])}else b.test(r[o])&&null!==d&&(null===d||b.test(d))||(u in e||(/opacity/i.test(o)?e[u]=function(t,e,r,n,i){t.setAttribute(e,(100*s(r,n,i)>>0)/100)}:e[u]=function(t,e,r,n,i){t.setAttribute(e,(10*s(r,n,i)>>0)/10)}),n[u]=parseFloat(r[o]));else u in e||(e[u]=function(t,e,n,i,o){t.setAttribute(e,l(n,i,o,r.keepHex))}),n[u]=a(r[o])}return n},this});

2
src/kute-css.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.99 | © dnp_theme | CSS Plugin | MIT-License
!function(t,r){if("function"==typeof define&&define.amd)define(["kute.js"],r);else if("object"==typeof module&&"function"==typeof require)module.exports=r(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");r(t.KUTE)}}(this,function(t){"use strict";for(var r="undefined"!=typeof global?global:window,e=t,o=r.dom,n=e.parseProperty,i=e.prepareStart,u=e.property,d=e.getCurrentStyle,f=e.truD,a=e.truC,c=(r._number,r._unit),g=r._color,l=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],b=["clip"],m=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),x=l.concat(b,s,p,h,m),R=x.length,C=C||{},T=0;T<R;T++)l.indexOf(x[T])!==-1?C[x[T]]="rgba(0,0,0,0)":y.indexOf(x[T])!==-1?C[x[T]]=0:m.indexOf(x[T])!==-1?C[x[T]]=[50,50]:"clip"===x[T]&&(C[x[T]]=[0,0,0,0]);for(var T=0,W=l.length;T<W;T++)n[l[T]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n,i){t.style[r]=g(e,o,n,i.keepHex)}),a(r)},i[l[T]]=function(t,r,e){return d(t,r)||C[r]};for(var T=0,W=v.length;T<W;T++)n[v[T]]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.v,o.v,o.u,n)}),f(r)},i[v[T]]=function(t,r,e){return d(t,r)||C[r]};for(var T=0,W=s.length;T<W;T++){var S=u(s[T]);n[S]=function(t,r){return t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.v,o.v,o.u,n)}),f(r)},i[S]=function(t,r,e){return d(t,S)||C[r]}}return n.clip=function(t,r){if(t in o||(o[t]=function(t,r,e,o,n){var i=0,u=[];for(i;i<4;i++){var d=e[i].v,f=o[i].v,a=o[i].u||"px";u[i]=c(d,f,a,n)}t.style[r]="rect("+u+")"}),r instanceof Array)return[f(r[0]),f(r[1]),f(r[2]),f(r[3])];var e=r.replace(/rect|\(|\)/g,"");return e=/\,/g.test(e)?e.split(/\,/g):e.split(/\s/g),[f(e[0]),f(e[1]),f(e[2]),f(e[3])]},i.clip=function(t,r,e){var o=d(t,r),n=d(t,"width"),i=d(t,"height");return/rect/.test(o)?o:[0,n,i,0]},n.backgroundPosition=function(t,r){if(t in o||(o[t]=function(t,r,e,o,n){t.style[r]=c(e.x.v,o.x.v,"%",n)+" "+c(e.y.v,o.y.v,"%",n)}),r instanceof Array)return{x:f(r[0])||{v:50,u:"%"},y:f(r[1])||{v:50,u:"%"}};var e,n,i=r.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return i=/\,/g.test(i)?i.split(/\,/g):i.split(/\s/g),i=2===i.length?i:[i[0],50],e=f(i[0]),n=f(i[1]),{x:e,y:n}},i.backgroundPosition=function(t,r,e){return d(t,r)||C[r]},this});
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("CSS Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";for(var e="undefined"!=typeof global?global:window,r=t,n=r.dom,i=r.parseProperty,o=r.prepareStart,u=r.property,d=r.getCurrentStyle,a=r.truD,l=r.truC,f=e.Interpolate.number,c=(e.Interpolate.unit,e.Interpolate.color),g=["borderColor","borderTopColor","borderRightColor","borderBottomColor","borderLeftColor","outlineColor"],p=["right","bottom","minWidth","minHeight","maxWidth","maxHeight","padding","margin","paddingTop","paddingBottom","paddingLeft","paddingRight","marginTop","marginBottom","marginLeft","marginRight","borderWidth","borderTopWidth","borderRightWidth","borderBottomWidth","borderLeftWidth","outlineWidth"],s=["borderRadius","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],h=["fontSize","lineHeight","letterSpacing","wordSpacing"],m=["clip"],b=["backgroundPosition"],v=p.concat(h),y=s.concat(p,h),R=g.concat(m,s,p,h,b),x=R.length,C=C||{},T=0;T<x;T++)g.indexOf(R[T])!==-1?C[R[T]]="rgba(0,0,0,0)":y.indexOf(R[T])!==-1?C[R[T]]=0:b.indexOf(R[T])!==-1?C[R[T]]=[50,50]:"clip"===R[T]&&(C[R[T]]=[0,0,0,0]);for(var T=0,W=g.length;T<W;T++)i[g[T]]=function(t,e){return t in n||(n[t]=function(t,e,r,n,i,o){t.style[e]=c(r,n,i,o.keepHex)}),l(e)},o[g[T]]=function(t){return d(this.element,t)||C[t]};for(var T=0,W=v.length;T<W;T++)i[v[T]]=function(t,e){return t in n||(p.indexOf(t)>-1?n[t]=function(t,e,r,n,i){t.style[e]=(i>.98||i<.02?(100*f(r.v,n.v,i)>>0)/100:f(r.v,n.v,i)>>0)+n.u}:n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[v[T]]=function(t,e){return d(this.element,t)||C[t]};for(var T=0,W=s.length;T<W;T++)i[s[T]]=function(t,e){return t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r.v,n.v,i)>>0)/100+n.u}),a(e)},o[s[T]]=function(t,e){var r=t===s[0]?s[1]:t;return r=u(r),d(this.element,r)||C[t]};return i.clip=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){var o=0,u=[];for(o;o<4;o++){var d=r[o].v,a=n[o].v,l=n[o].u||"px";u[o]=(100*f(d,a,i)>>0)/100+l}t.style[e]="rect("+u+")"}),e instanceof Array)return[a(e[0]),a(e[1]),a(e[2]),a(e[3])];var r=e.replace(/rect|\(|\)/g,"");return r=/\,/g.test(r)?r.split(/\,/g):r.split(/\s/g),[a(r[0]),a(r[1]),a(r[2]),a(r[3])]},o.clip=function(t,e){var r=d(this.element,t),n=d(this.element,"width"),i=d(this.element,"height");return/rect/.test(r)?r:[0,n,i,0]},i.backgroundPosition=function(t,e){if(t in n||(n[t]=function(t,e,r,n,i){t.style[e]=(100*f(r[0],n[0],i)>>0)/100+"% "+(100*f(r[1],n[1],i)>>0)/100+"%"}),e instanceof Array){var r=a(e[0]).v,i=a(e[1]).v;return[NaN!==r?r:50,NaN!==i?i:50]}var o=e.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);return o=o.split(/(\,|\s)/g),o=2===o.length?o:[o[0],50],[a(o[0]).v,a(o[1]).v]},o.backgroundPosition=function(t,e){return d(this.element,t)||C[t]},this});

2
src/kute-svg.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
src/kute-text.min.js vendored
View file

@ -1,2 +1,2 @@
// KUTE.js v1.5.99 | © dnp_theme | Text Plugin | MIT-License
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=e.dom,i=n.prepareStart,u=n.parseProperty,s=e._number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),f=String("0123456789").split(""),p=o.concat(a,f),h=(p.concat(l),Math.random),c=Math.floor,g=Math.min;return i.text=i.number=function(t,e,n){return t.innerHTML},u.text=function(t,e,n){return"text"in r||(r.text=function(t,e,n,r,i,u){var s=s||"alpha"===u.textChars?o:"upper"===u.textChars?a:"numeric"===u.textChars?f:"alphanumeric"===u.textChars?p:"symbols"===u.textChars?l:u.textChars?u.textChars.split(""):o,m=s.length,b=s[c(h()*m)],d="",x="",y=n.substring(0),C=r.substring(0);d=""!==n?y.substring(y.length,c(g(i*y.length,y.length))):"",x=C.substring(0,c(g(i*C.length,C.length))),t.innerHTML=i<1?x+b+d:r}),e},u.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=c(s(n,r,i))}),parseInt(e)||0},this});
!function(t,e){if("function"==typeof define&&define.amd)define(["kute.js"],e);else if("object"==typeof module&&"function"==typeof require)module.exports=e(require("kute.js"));else{if("undefined"==typeof t.KUTE)throw new Error("Text-Plugin require KUTE.js.");e(t.KUTE)}}(this,function(t){"use strict";var e="undefined"!=typeof global?global:window,n=t,r=n.dom,i=n.prepareStart,s=n.parseProperty,u=e.Interpolate.number,o=String("abcdefghijklmnopqrstuvwxyz").split(""),a=String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""),l=String("~!@#$%^&*()_+{}[];'<>,./?=-").split(""),p=String("0123456789").split(""),f=o.concat(a,p),h=(f.concat(l),Math.random),c=Math.min;return i.text=i.number=function(t,e){return this.element.innerHTML},s.text=function(t,e){return"text"in r||(r.text=function(t,e,n,r,i,s){var u=u||"alpha"===s.textChars?o:"upper"===s.textChars?a:"numeric"===s.textChars?p:"alphanumeric"===s.textChars?f:"symbols"===s.textChars?l:s.textChars?s.textChars.split(""):o,g=u.length,m=u[h()*g>>0],b="",d="",x=n.substring(0),y=r.substring(0);b=""!==n?x.substring(x.length,c(i*x.length,x.length)>>0):"",d=y.substring(0,c(i*y.length,y.length)>>0),t.innerHTML=i<1?d+m+b:r}),e},s.number=function(t,e,n){return"number"in r||(r.number=function(t,e,n,r,i){t.innerHTML=u(n,r,i)>>0}),parseInt(e)||0},this});

2
src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
start.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="A quick start guide for KUTE.js, CDN sources, NPM.">
<meta name="keywords" content="kute,kute.js,animation,tweening engine,animation engine,getting started with kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">

2
svg.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="The SVG Plugin for KUTE.js enables animation for SVG morph, draw SVG, as well as some SVG specific CSS properties.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,svg transform,cross-browser svg transform,tweening engine,animation engine,morph svg,draw svg,svg animation,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">

2
text.html
View file

@ -8,7 +8,7 @@
<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="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
<meta name="description" content="The Text Plugin for KUTE.js enables string manipulation.">
<meta name="keywords" content="kute,kute.js,animation,javascript animation,tweening engine,animation engine,text plugin,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">