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 70ee2a448a
commit 67c47a6f08
37 changed files with 491 additions and 504 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
README.md
View file

@ -41,7 +41,7 @@ For documentation, examples and other cool tips, check the <a href="http://thedn
* properly handles the suffixes for you
# Easing Functions - [visit page](http://thednp.github.io/kute.js/easing.html)
**NOTE:** Starting with KUTE.js v 1.6.0 the Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the [Experiments repository on Github](https://github.com/thednp/kute.js/tree/experiments).</p>
**NOTE:** Starting with KUTE.js v 1.6.0 the Physics and Cubic Bezier Functions are removed from the distribution folder and from CDN repositories, but you can find them in the [Experiments repository on Github](https://github.com/thednp/kute.js/tree/experiments).</p>
* optimized dynamics easing functions
* optimized cubic-bezier easing functions
@ -168,7 +168,6 @@ tween.start();
```
# How it works
* it computes all the values before starting the animation, then caches them to avoid layout thrashing that occur during animation
* handles all kinds of `transform` properties and makes sure to always use the same order of the `transform` properties (`translate`, `rotate`, `skew`, `scale`)
@ -195,4 +194,4 @@ Since most modern browsers can handle pretty much everything, legacy browsers ne
* Others who [contribute](https://github.com/thednp/kute.js/graphs/contributors) to the project
# License
<a href="https://github.com/thednp/kute.js/blob/master/LICENSE">MIT License</a>
<a href="https://github.com/thednp/kute.js/blob/master/LICENSE">MIT License</a>

7
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/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
demo/src/kute-svg.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
demo/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
demo/src/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
demo/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
demo/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
demo/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">

2
dist/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
dist/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
dist/kute-svg.min.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/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
dist/kute.min.js vendored
View file

File diff suppressed because one or more lines are too long

28
kute-attr.js
View file

@ -19,9 +19,9 @@
'use strict';
var g = typeof global !== 'undefined' ? global : window, // connect to KUTE object and global
K = KUTE, DOM = g.dom, prepareStart = K.prepareStart, parseProperty = K.parseProperty,
K = KUTE, DOM = K.dom, prepareStart = K.prepareStart, parseProperty = K.parseProperty,
trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck,
unit = g._unit, number = g._number, color = g._color;
unit = g.Interpolate.unit, number = g.Interpolate.number, color = g.Interpolate.color;
// here we go with the plugin
var getCurrentValue = function(e,a){ return e.getAttribute(a); }, // get current attribute value
@ -30,11 +30,11 @@
return a.replace(/[A-Z]/g, "-$&").toLowerCase();
};
prepareStart['attr'] = function(el,p,v){
prepareStart.attr = function(p,v){
var attrStartValues = {};
for (var a in v){
var attribute = replaceUppercase(a).replace(/_+[a-z]+/,''),
currentValue = getCurrentValue(el,attribute); // get the value for 'fill-opacity' not fillOpacity
currentValue = getCurrentValue(this.element,attribute); // get the value for 'fill-opacity' not fillOpacity
attrStartValues[attribute] = svgColors.indexOf(attribute) !== -1 ? (currentValue || 'rgba(0,0,0,0)') : (currentValue || (/opacity/i.test(a) ? 1 : 0));
}
return attrStartValues;
@ -42,7 +42,7 @@
// process attributes object K.pp.attr(t[x])
// and also register their render functions
parseProperty['attr'] = function(a,o,l){
parseProperty.attr = function(a,o){
if (!('attr' in DOM)) {
DOM.attr = function(l,p,a,b,v) {
for ( var o in b ){
@ -54,33 +54,33 @@
var ats = {};
for ( var p in o ) {
var prop = replaceUppercase(p), cv = getCurrentValue(l,prop.replace(/_+[a-z]+/,''));
var prop = replaceUppercase(p), regex = /(%|[a-z]+)$/, cv = getCurrentValue(this.element,prop.replace(/_+[a-z]+/,''));
if ( svgColors.indexOf(prop) === -1) {
if ( cv !== null && /(%|[a-z]+)$/.test(cv) ) {
var u = trueDimension(cv).u || trueDimension(o[p]).u, s = /%/.test(u) ? '_percent' : '_'+u;
if ( cv !== null && regex.test(cv) ) {
var prefix = trueDimension(cv).u || trueDimension(o[p]).u, s = /%/.test(prefix) ? '_percent' : '_'+prefix;
if (!(prop+s in atts)) {
if (/%/.test(u)) {
if (/%/.test(prefix)) {
atts[prop+s] = function(l,p,a,b,v) {
var _p = _p || p.replace(s,'');
l.setAttribute(_p, (Math.floor(number(a.v,b.v,v) * 100)/100) + b.u );
l.setAttribute(_p, ((number(a.v,b.v,v) * 100>>0)/100) + b.prefix );
}
} else {
atts[prop+s] = function(l,p,a,b,v) {
var _p = _p || p.replace(s,'');
l.setAttribute(_p, Math.floor(number(a.v,b.v,v)) + b.u );
l.setAttribute(_p, (number(a.v,b.v,v)>>0) + b.prefix );
}
}
}
ats[prop+s] = trueDimension(o[p]);
} else if ( !/(%|[a-z]+)$/.test(o[p]) || cv === null || cv !== null && !/(%|[a-z]+)$/.test(cv) ) {
} else if ( !regex.test(o[p]) || cv === null || cv !== null && !regex.test(cv) ) {
if (!(prop in atts)) {
if (/opacity/i.test(p)) {
atts[prop] = function(l,o,a,b,v) {
l.setAttribute(o, Math.floor(number(a,b,v) * 100) / 100 );
l.setAttribute(o, (number(a,b,v) * 100 >> 0) / 100 );
}
} else {
atts[prop] = function(l,o,a,b,v) {
l.setAttribute(o, Math.floor(number(a,b,v) *10 ) / 10 );
l.setAttribute(o, (number(a,b,v) *10 >> 0 ) / 10 );
}
}
}

77
kute-css.js
View file

@ -16,10 +16,10 @@
})(this, function(KUTE){
'use strict';
var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = g.dom,
var g = typeof global !== 'undefined' ? global : window, K = KUTE, DOM = K.dom,
parseProperty = K.parseProperty, prepareStart = K.prepareStart, property = K.property,
getCurrentStyle = K.getCurrentStyle, trueDimension = K.truD, trueColor = K.truC,
number = g._number, unit = g._unit, color = g._color;
number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color;
var _colors = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
_boxModel = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
@ -27,10 +27,10 @@
'borderWidth', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'outlineWidth'], // dimensions / box model
_radius = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/%
_textProperties = ['fontSize','lineHeight','letterSpacing','wordSpacing'], // text properties
_clip = ['clip'], _bg = ['backgroundPosition'], // clip | background position
_mergeTextAndBox = _boxModel.concat(_textProperties), // a merge of all properties with px|%|em|rem|etc unit
_clip = ['clip'], _backgroundPosition = ['backgroundPosition'], // clip | background position
_textAndBox = _boxModel.concat(_textProperties), // a merge of all properties with px|%|em|rem|etc unit
_mergeUnits = _radius.concat(_boxModel,_textProperties), // a merge of all properties with px|%|em|rem|etc unit
_all = _colors.concat(_clip, _radius, _boxModel, _textProperties, _bg), al = _all.length,
_all = _colors.concat(_clip, _radius, _boxModel, _textProperties, _backgroundPosition), al = _all.length,
_defaults = _defaults || {}; //all properties default values
//populate default values object
@ -39,7 +39,7 @@
_defaults[_all[i]] = 'rgba(0,0,0,0)'; // _defaults[p] = {r:0,g:0,b:0,a:1};
} else if ( _mergeUnits.indexOf(_all[i]) !== -1 ) {
_defaults[_all[i]] = 0;
} else if ( _bg.indexOf(_all[i]) !== -1 ){
} else if ( _backgroundPosition.indexOf(_all[i]) !== -1 ){
_defaults[_all[i]] = [50,50];
} else if ( _all[i] === 'clip' ){
_defaults[_all[i]] = [0,0,0,0];
@ -56,50 +56,57 @@
}
return trueColor(v);
};
prepareStart[_colors[i]] = function(el,p,v){
return getCurrentStyle(el,p) || _defaults[p];
prepareStart[_colors[i]] = function(p){
return getCurrentStyle(this.element,p) || _defaults[p];
};
}
// create prepare/process/render functions for additional box model properties
for (var i = 0, l = _mergeTextAndBox.length; i<l; i++) {
parseProperty[_mergeTextAndBox[i]] = function(p,v){
for (var i = 0, l = _textAndBox.length; i<l; i++) {
parseProperty[_textAndBox[i]] = function(p,v){
if (!(p in DOM)){
DOM[p] = function(l,p,a,b,v){
l.style[p] = unit(a.v,b.v,b.u,v);
if (_boxModel.indexOf(p) > -1) {
DOM[p] = function(l,p,a,b,v){
l.style[p] = ( v > 0.98 || v<0.02 ? (number(a.v,b.v,v) * 100 >> 0)/100 : number(a.v,b.v,v)>>0 ) + b.u;
}
} else {
DOM[p] = function(l,p,a,b,v){
l.style[p] = ((number(a.v,b.v,v) * 100 >> 0)/100) + b.u;
}
}
}
return trueDimension(v);
};
prepareStart[_mergeTextAndBox[i]] = function(el,p,v){
return getCurrentStyle(el,p) || _defaults[p];
prepareStart[_textAndBox[i]] = function(p,v){
return getCurrentStyle(this.element,p) || _defaults[p];
};
}
//create prepare/process/render functions for radius properties
for (var i = 0, l = _radius.length; i<l; i++) {
var prefixedProp = property(_radius[i]);
parseProperty[prefixedProp] = function(p,v){
parseProperty[_radius[i]] = function(p,v){
if ( (!(p in DOM)) ) {
DOM[p] = function(l,p,a,b,v){
l.style[p] = unit(a.v,b.v,b.u,v);
l.style[p] = ((number(a.v,b.v,v) * 100 >> 0)/100) + b.u;
}
}
return trueDimension(v);
};
prepareStart[prefixedProp] = function(el,p,v){
return getCurrentStyle(el,prefixedProp) || _defaults[p];
prepareStart[_radius[i]] = function(p,v){
var radiusProp = p === _radius[0] ? _radius[1] : p; radiusProp = property(radiusProp); // old Safari has a problem with borderRadius
return getCurrentStyle(this.element,radiusProp) || _defaults[p];
};
}
// clip
parseProperty['clip'] = function(p,v){
parseProperty.clip = function(p,v){
if ( !(p in DOM) ) {
DOM[p] = function(l,p,a,b,v) {
var h = 0, cl = [];
for (h;h<4;h++){
var c1 = a[h].v, c2 = b[h].v, cu = b[h].u || 'px';
cl[h] = unit(c1,c2,cu,v);
cl[h] = ((number(c1,c2,v)*100 >> 0)/100) + cu;
}
l.style[p] = 'rect('+cl+')';
};
@ -113,30 +120,30 @@
}
};
prepareStart['clip'] = function(el,p,v){
var c = getCurrentStyle(el,p), w = getCurrentStyle(el,'width'), h = getCurrentStyle(el,'height');
prepareStart.clip = function(p,v){
var c = getCurrentStyle(this.element,p), w = getCurrentStyle(this.element,'width'), h = getCurrentStyle(this.element,'height');
return !/rect/.test(c) ? [0, w, h, 0] : c;
};
// background position
parseProperty['backgroundPosition'] = function(p,v) {
if ( !(p in DOM) ) {
parseProperty.backgroundPosition = function(p,v) {
if ( !(p in DOM) ) {
DOM[p] = function(l,p,a,b,v) {
l.style[p] = unit(a.x.v,b.x.v,'%',v) + ' ' + unit(a.y.v,b.y.v,'%',v);
l.style[p] = ((number(a[0],b[0],v)*100>>0)/100) + '%' + ' ' + ((number(a[1],b[1],v)*100>>0)/100) + '%';
};
}
if ( v instanceof Array ){
return { x: trueDimension(v[0])||{ v: 50, u: '%' }, y: trueDimension(v[1])||{ v: 50, u: '%' } };
if ( v instanceof Array ){
var x = trueDimension(v[0]).v, y = trueDimension(v[1]).v;
return [ x !== NaN ? x : 50, y !== NaN ? y : 50 ];
} 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 = trueDimension(posxy[0]); yp = trueDimension(posxy[1]);
return { x: xp, y: yp };
var posxy = v.replace(/top|left/g,0).replace(/right|bottom/g,100).replace(/center|middle/g,50);
posxy = posxy.split(/(\,|\s)/g); posxy = posxy.length === 2 ? posxy : [posxy[0],50];
return [ trueDimension(posxy[0]).v, trueDimension(posxy[1]).v ];
}
}
prepareStart['backgroundPosition'] = function(el,p,v){
return getCurrentStyle(el,p) || _defaults[p];
}
prepareStart.backgroundPosition = function(p,v){
return getCurrentStyle(this.element,p) || _defaults[p];
}
return this;
});

8
kute-jquery.js
View file

@ -4,7 +4,7 @@
* Licensed under MIT-License
*/
(function(root,factory){
(function(root,factory){
// We need to require the root KUTE and jQuery.
if (typeof define === 'function' && define.amd) {
define(["./kute.js", "jquery"], function(KUTE, $){
@ -29,14 +29,12 @@
'use strict';
$.fn.fromTo = function(from,to,ops) {
var el = this.length > 1 ? this : this[0],
method = this.length > 1 ? 'allFromTo' : 'fromTo';
var el = this.length > 1 ? this : this[0], method = this.length > 1 ? 'allFromTo' : 'fromTo';
return KUTE[method](el,from,to,ops);
};
$.fn.to = function(to,ops) {
var el = this.length > 1 ? this : this[0],
method = this.length > 1 ? 'allTo' : 'to';
var el = this.length > 1 ? this : this[0], method = this.length > 1 ? 'allTo' : 'to';
return KUTE[method](el,to,ops);
};

154
kute-svg.js
View file

@ -19,19 +19,19 @@
'use strict';
var g = typeof global !== 'undefined' ? global : window, K = KUTE, // connect plugin to KUTE object and global
DOM = g.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
DOM = K.dom, parseProperty = K.parseProperty, prepareStart = K.prepareStart, getCurrentStyle = K.getCurrentStyle,
trueColor = K.truC, trueDimension = K.truD, crossCheck = K.crossCheck,
number = g._number, unit = g._unit, color = g._color, // interpolate functions
number = g.Interpolate.number, unit = g.Interpolate.unit, color = g.Interpolate.color, // interpolate functions
_isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false;
// here we go with the plugin
var pathReg = /(m[^(h|v|l)]*|[vhl][^(v|h|l|z)]*)/gmi, ns = 'http://www.w3.org/2000/svg',
coords = g._coords = function(a,b,l,v) { // function(array1, array2, length, progress) for SVG morph
coords = g.Interpolate.coords = function(a,b,l,v) { // function(array1, array2, length, progress) for SVG morph
var points =[];
for(var i=0;i<l;i++) { // for each point
points[i] = [];
for(var j=0;j<2;j++) { // each point coordinate
points[i].push( Math.floor(a[i][j]+(b[i][j]-a[i][j])*v) );
points[i].push( (a[i][j]+(b[i][j]-a[i][j])*v) >> 0 );
}
}
return points;
@ -168,21 +168,21 @@
};
// process path object and also register the render function
parseProperty['path'] = function(a,o,l) { // K.pp['path']('path',value,element);
parseProperty.path = function(o,v) {
if (!('path' in DOM)) {
DOM['path'] = function(l,p,a,b,v){
DOM.path = function(l,p,a,b,v){
l.setAttribute("d", v === 1 ? b.o : 'M' + coords( a['d'],b['d'],b['d'].length,v ) + 'Z' );
}
}
return getPath(o);
return getPath(v);
};
prepareStart['path'] = function(el,p,v){
return el.getAttribute('d');
prepareStart.path = function(p){
return this.element.getAttribute('d');
};
crossCheck['path'] = function() {
var p1 = getOnePath(this._vS.path.o), p2 = getOnePath(this._vE.path.o), paths;
crossCheck.path = function() {
var p1 = getOnePath(this.valuesStart.path.o), p2 = getOnePath(this.valuesEnd.path.o), paths;
// path tween options
this.options.morphPrecision = this.options && 'morphPrecision' in this.options ? parseInt(this.options.morphPrecision) : 15;
@ -191,16 +191,16 @@
// begin processing paths
paths = computePathCross.apply(this,[p1,p2]);
this._vS.path.d = paths[0];
this._vE.path.d = paths[1];
this.valuesStart.path.d = paths[0];
this.valuesEnd.path.d = paths[1];
};
// SVG DRAW
var percent = function(v,l){ return parseFloat(v) / 100 * l;}, // percent
var percent = function(v,l){ return parseFloat(v) / 100 * l; }, // percent
// SVG DRAW UTILITITES
// http://stackoverflow.com/a/30376660
getRectLength = function(el){ // getRectLength - return the length of a Rect
getRectLength = function(el){ // returns the length of a Rect
var w = el.getAttribute('width');
var h = el.getAttribute('height');
return (w*2)+(h*2);
@ -231,23 +231,23 @@
}
return len;
},
getLineLength = function(el){ // getLineLength - return the length of the line
getLineLength = function(el){ // return the length of the line
var x1 = el.getAttribute('x1');
var x2 = el.getAttribute('x2');
var y1 = el.getAttribute('y1');
var y2 = el.getAttribute('y2');
return Math.sqrt(Math.pow((x2-x1), 2)+Math.pow((y2-y1),2));
},
getCircleLength = function(el){ // getCircleLength - return the length of the circle
getCircleLength = function(el){ // return the length of the circle
var r = el.getAttribute('r');
return 2 * Math.PI * r;
},
getEllipseLength = function(el) { // getEllipseLength - returns the length of an ellipse
getEllipseLength = function(el) { // returns the length of an ellipse
var rx = el.getAttribute('rx'), ry = el.getAttribute('ry'),
len = 2*rx, wid = 2*ry;
return ((Math.sqrt(.5 * ((len * len) + (wid * wid)))) * (Math.PI * 2)) / 2;
},
getTotalLength = function(el){ // getLength - returns the result of any of the below functions
getTotalLength = function(el){ // returns the result of any of the below functions
if (/rect/.test(el.tagName)) {
return getRectLength(el);
} else if (/circle/.test(el.tagName)) {
@ -278,19 +278,19 @@
return { s: start, e: end, l: l }
};
parseProperty['draw'] = function(a,o,el){ // register the draw property
parseProperty.draw = function(a,o){ // register the draw property
if (!('draw' in DOM)) {
DOM['draw'] = function(l,p,a,b,v){
var ll = a.l, s = Math.floor(number(a.s,b.s,v)), e = Math.floor(number(a.e,b.e,v)), o = 0 - s;
DOM.draw = function(l,p,a,b,v){
var ll = a.l>>0, s = number(a.s,b.s,v)>>0, e = number(a.e,b.e,v)>>0, o = 0 - s;
l.style.strokeDashoffset = o +'px';
l.style.strokeDasharray = e+o<1.01 ? '0px, ' + ll + 'px' : (e+o) + 'px, ' + ll + 'px';
l.style.strokeDasharray = (e+o-0.5>>0) + 'px, ' + ll + 'px';
}
}
return getDraw(el,o);
return getDraw(this.element,o);
}
prepareStart['draw'] = function(el,p,v){
return getDraw(el);
prepareStart.draw = function(){
return getDraw(this.element);
}
@ -305,117 +305,105 @@
}
return c;
},
translateSVG = g._translateSVG = function (s,e,a,b,v){ // translate(i+'(',')',a[i],b[i],v)
return s + ((a[1] === b[1] && b[1] === 0 ) ? (Math.floor(number(a[0],b[0],v) * 10)/10)
: ((Math.floor(number(a[0],b[0],v) * 10)/10) + ' ' + (Math.floor(number(a[1],b[1],v)) *10)/10)) + e;
translateSVG = g.Interpolate.translateSVG = function (s,e,a,b,v){ // translate(i+'(',')',a[i],b[i],v)
return s + ( (a[1] === b[1] && b[1] === 0 ) ? ((number(a[0],b[0],v) * 10 >> 0)/10)
: (((number(a[0],b[0],v) * 10 >> 0)/10) + ' ' + ((number(a[1],b[1],v)) *10 >> 0)/10) ) + e;
},
rotateSVG = g._rotateSVG = function (s,e,a,b,v){
return s + ( Math.floor(number(a[0],b[0],v)*10)/10 + ' ' + b[1] + ',' + b[2]) + e;
rotateSVG = g.Interpolate.rotateSVG = function (s,e,a,b,v){
return s + ( (number(a[0],b[0],v)*10 >> 0)/10 + ' ' + b[1] + ',' + b[2] ) + e;
},
scaleSVG = g._scaleSVG = function (s,e,a,b,v){ // scale / skew
return s + Math.floor(number(a,b,v)*100)/100 + e;
scaleSVG = g.Interpolate.scaleSVG = function (s,e,a,b,v){ // scale would very much like to have 3 decimals
return s + ( (number(a,b,v)*1000 >> 0)/1000 ) + e;
},
skewSVG = g._skewSVG = function (s,e,a,b,v){ // scale / skew
return s + Math.floor(number(a,b,v)*10)/10 + e;
skewSVG = g.Interpolate.skewSVG = function (s,e,a,b,v){ // skew
return s + ( (number(a,b,v)*10 >> 0)/10 ) + e;
};
parseProperty['svgTransform'] = function(p,v,l){
parseProperty.svgTransform = function(p,v){
// register the render function
if (!('svgTransform' in DOM)) {
DOM['svgTransform'] = function(l,p,a,b,v){
var tl = '', rt = '', sx = '', sy = '', s = '';
for (var i in b){
if ( i === 'translate'){ // translate
tl += translateSVG(i+'(',')',a[i],b[i],v);
} else if ( i === 'rotate'){ // rotate
rt += rotateSVG(i+'(',')',a[i],b[i],v);
} else if ( i === 'scale'){ // scale
s += scaleSVG(i+'(',')',a[i],b[i],v);
} else if ( i === 'skewX'){ // skewX
sx += skewSVG(i+'(',')',a[i],b[i],v);
} else if ( i === 'skewY'){ // skewY
sy += skewSVG(i+'(',')',a[i],b[i],v);
}
}
l.setAttribute('transform', (tl+s+rt+sx+sy) );
DOM.svgTransform = function(l,p,a,b,v){
l.setAttribute('transform', ('translate' in a ? translateSVG('translate(',')',a.translate,b.translate,v) : '')
+('rotate' in a ? rotateSVG('rotate(',')',a.rotate,b.rotate,v) : '')
+('scale' in a ? scaleSVG('scale(',')',a.scale,b.scale,v) : '')
+('skewX' in a ? skewSVG('skewX(',')',a.skewX,b.skewX,v) : '')
+('skewY' in a ? skewSVG('skewY(',')',a.skewY,b.skewY,v) : ''));
}
}
// now prepare transform
var tf = {}, bb = l.getBBox(), cx = bb.x + bb.width/2, cy = bb.y + bb.height/2, r, cr, t, ct;
var svgTransformObject = {}, bb = this.element.getBBox(), cx = bb.x + bb.width/2, cy = bb.y + bb.height/2, r, cr, t, ct;
for ( i in v ) { // populate the valuesStart and / or valuesEnd
if (i === 'rotate'){
r = v[i] instanceof Array ? v[i]
: /\s/.test(v[i]) ? [v[i].split(' ')[0]*1, v[i].split(' ')[1].split(',')[0]*1, v[i].split(' ')[1].split(',')[1]*1]
: [v[i]*1,cx,cy];
tf[i] = r;
svgTransformObject[i] = r;
} else if (i === 'translate'){
t = v[i] instanceof Array ? v[i] : /\,|\s/.test(v[i]) ? v[i].split(/\,|\s/) : [v[i]*1,0];
tf[i] = [t[0] * 1||0, t[1] * 1||0];
svgTransformObject[i] = [t[0] * 1||0, t[1] * 1||0];
} else if (i === 'scale'){
tf[i] = v[i] * 1||1;
svgTransformObject[i] = v[i] * 1||1;
} else if (/skew/.test(i)) {
tf[i] = v[i] * 1||0;
svgTransformObject[i] = v[i] * 1||0;
}
}
// try to adjust translation when scale is used, probably we should do the same when using skews, but I think it's a waste of time
// http://www.petercollingridge.co.uk/interactive-svg-components/pan-and-zoom-control
if ('scale' in tf) {
!('translate' in tf) && ( tf['translate'] = [0,0] ); // if no translate is found in current value or next value, we default to 0
tf['translate'][0] += (1-tf['scale']) * bb.width/2;
tf['translate'][1] += (1-tf['scale']) * bb.height/2;
if ('scale' in svgTransformObject) {
!('translate' in svgTransformObject) && ( svgTransformObject['translate'] = [0,0] ); // if no translate is found in current value or next value, we default to 0
svgTransformObject['translate'][0] += (1-svgTransformObject['scale']) * bb.width/2;
svgTransformObject['translate'][1] += (1-svgTransformObject['scale']) * bb.height/2;
// adjust rotation transform origin and translation when skews are used, to make the animation look exactly the same as if we were't using svgTransform
// http://stackoverflow.com/questions/39191054/how-to-compensate-translate-when-skewx-and-skewy-are-used-on-svg/39192565#39192565
if ('rotate' in tf) {
tf['rotate'][1] -= 'skewX' in tf ? Math.tan(tf['skewX']) * bb.height : 0;
tf['rotate'][2] -= 'skewY' in tf ? Math.tan(tf['skewY']) * bb.width : 0;
if ('rotate' in svgTransformObject) {
svgTransformObject['rotate'][1] -= 'skewX' in svgTransformObject ? Math.tan(svgTransformObject['skewX']) * bb.height : 0;
svgTransformObject['rotate'][2] -= 'skewY' in svgTransformObject ? Math.tan(svgTransformObject['skewY']) * bb.width : 0;
}
tf['translate'][0] += 'skewX' in tf ? Math.tan(tf['skewX']) * bb.height*2 : 0;
tf['translate'][1] += 'skewY' in tf ? Math.tan(tf['skewY']) * bb.width*2 : 0;
svgTransformObject['translate'][0] += 'skewX' in svgTransformObject ? Math.tan(svgTransformObject['skewX']) * bb.height*2 : 0;
svgTransformObject['translate'][1] += 'skewY' in svgTransformObject ? Math.tan(svgTransformObject['skewY']) * bb.width*2 : 0;
} // more variations here https://gist.github.com/thednp/0b93068e20adb84658b5840ead0a07f8
return tf;
return svgTransformObject;
}
// returns an obect with current transform attribute value
prepareStart['svgTransform'] = function(l,p,t) {
var tr = {}, i, ctr = parseTransform(l.getAttribute('transform'));
prepareStart.svgTransform = function(p,t) {
var tr = {}, i, ctr = parseTransform(this.element.getAttribute('transform'));
for (i in t) { tr[i] = i in ctr ? ctr[i] : (i==='scale'?1:0); } // find a value in current attribute value or add a default value
return tr;
}
crossCheck['svgTransform'] = function() { // helper function that helps preserve current transform properties into the objects
var bb = this._el.getBBox(), ctr = parseTransform(this._el.getAttribute('transform')), r, t, i,
crossCheck.svgTransform = function() { // helper function that helps preserve current transform properties into the objects
var bb = this.element.getBBox(), ctr = parseTransform(this.element.getAttribute('transform')), r, t, i,
cx = bb.x + bb.width/2, cy = bb.y + bb.height/2;
for ( i in ctr ) { // populate the valuesStart
if (i === 'translate'){
t = ctr[i] instanceof Array ? ctr[i] : /\,|\s/.test(ctr[i]) ? ctr[i].split(/\,|\s/) : [ctr[i]*1,0];
this._vS.svgTransform[i] = [t[0] * 1||0, t[1] * 1||0];
this.valuesStart.svgTransform[i] = [t[0] * 1||0, t[1] * 1||0];
} else if (i === 'scale'){
this._vS.svgTransform[i] = ctr[i] * 1||1;
this.valuesStart.svgTransform[i] = ctr[i] * 1||1;
} else if (i === 'rotate'){
r = ctr[i] instanceof Array ? ctr[i]
: /\s/.test(ctr[i]) ? [ctr[i].split(' ')[0]*1, ctr[i].split(' ')[1].split(',')[0]*1, ctr[i].split(' ')[1].split(',')[1]*1]
: [ctr[i]*1,cx,cy];
this._vS.svgTransform[i] = r;
this.valuesStart.svgTransform[i] = r;
} else if (/skew/.test(i)) {
this._vS.svgTransform[i] = ctr[i] * 1||0;
this.valuesStart.svgTransform[i] = ctr[i] * 1||0;
}
}
for (var i in this._vS.svgTransform) {
if (!(i in this._vE.svgTransform)) { // copy existing and unused properties to the valuesEnd
this._vE.svgTransform[i] = this._vS.svgTransform[i];
for (var i in this.valuesStart.svgTransform) {
if (!(i in this.valuesEnd.svgTransform)) { // copy existing and unused properties to the valuesEnd
this.valuesEnd.svgTransform[i] = this.valuesStart.svgTransform[i];
}
if (i === 'rotate' in this._vS.svgTransform && 'rotate' in this._vE.svgTransform){ // make sure to use the right transform origin when rotation is used
this._vE.svgTransform.rotate[1] = this._vS.svgTransform.rotate[1] = cx;
this._vE.svgTransform.rotate[2] = this._vS.svgTransform.rotate[2] = cy;
if (i === 'rotate' in this.valuesStart.svgTransform && 'rotate' in this.valuesEnd.svgTransform){ // make sure to use the right transform origin when rotation is used
this.valuesEnd.svgTransform.rotate[1] = this.valuesStart.svgTransform.rotate[1] = cx;
this.valuesEnd.svgTransform.rotate[2] = this.valuesStart.svgTransform.rotate[2] = cy;
}
}
}

24
kute-text.js
View file

@ -18,8 +18,8 @@
'use strict';
var g = typeof global !== 'undefined' ? global : window, // connect to KUTE object and global
K = KUTE, DOM = g.dom, prepareStart = K.prepareStart,
parseProperty = K.parseProperty, number = g._number;
K = KUTE, DOM = K.dom, prepareStart = K.prepareStart,
parseProperty = K.parseProperty, number = g.Interpolate.number;
// let's go with the plugin
var _string = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
@ -28,15 +28,15 @@
_numeric = String("0123456789").split(""), // numeric
_alphanumeric = _string.concat(_stringUppercase,_numeric), // alpha numeric
_all = _alphanumeric.concat(_symbols), // all caracters
random = Math.random, floor = Math.floor, min = Math.min;
random = Math.random, min = Math.min;
prepareStart['text'] = prepareStart['number'] = function(l,p,v){
return l.innerHTML;
prepareStart.text = prepareStart.number = function(p,v){
return this.element.innerHTML;
}
parseProperty['text'] = function(p,v,l) {
parseProperty.text = function(p,v) {
if ( !( 'text' in DOM ) ) {
DOM['text'] = function(l,p,a,b,v,o) {
DOM.text = function(l,p,a,b,v,o) {
var tp = tp || o.textChars === 'alpha' ? _string // textChars is alpha
: o.textChars === 'upper' ? _stringUppercase // textChars is numeric
: o.textChars === 'numeric' ? _numeric // textChars is numeric
@ -44,11 +44,11 @@
: o.textChars === 'symbols' ? _symbols // textChars is symbols
: o.textChars ? o.textChars.split('') // textChars is a custom text
: _string, ll = tp.length,
t = tp[floor((random() * ll))], ix = '', tx = '', fi = a.substring(0), f = b.substring(0);
t = tp[(random() * ll)>>0], ix = '', tx = '', fi = a.substring(0), f = b.substring(0);
// use string.replace(/<\/?[^>]+(>|$)/g, "") to strip HTML tags while animating ? this is definatelly a smart to do
ix = a !== '' ? fi.substring(fi.length,floor(min(v * fi.length, fi.length))) : ''; // initial text, A value
tx = f.substring(0,floor(min(v * f.length, f.length))); // end text, B value
ix = a !== '' ? fi.substring(fi.length, min(v * fi.length, fi.length)>>0 ) : ''; // initial text, A value
tx = f.substring(0, min(v * f.length, f.length)>>0 ); // end text, B value
l.innerHTML = v < 1 ? tx + t + ix : b;
}
}
@ -57,8 +57,8 @@
parseProperty['number'] = function(p,v,l) {
if ( !( 'number' in DOM ) ) {
DOM['number'] = function(l,p,a,b,v) {
l.innerHTML = floor( number(a, b, v));
DOM.number = function(l,p,a,b,v) {
l.innerHTML = number(a, b, v)>>0;
}
}
return parseInt(v) || 0;

423
kute.js
View file

@ -15,15 +15,15 @@
// set a custom scope for KUTE.js
var g = typeof global !== 'undefined' ? global : window, time = g.performance,
_tws = g._tweens = [], tick = null;
tweens = [], tick = null;
//supported properties
var _colors = ['color', 'backgroundColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
_boxModel = ['top', 'left', 'width', 'height'], // dimensions / box model
_transform = ['translate3d', 'translateX', 'translateY', 'translateZ', 'rotate', 'translate', 'rotateX', 'rotateY', 'rotateZ', 'skewX', 'skewY', 'scale'], // transform
_scroll = ['scrollTop', 'scroll'], //scroll, it has no default value, it's calculated on tween start
_scroll = ['scroll'], //scroll, it has no default value, it's calculated on tween start
_opacity = ['opacity'], // opacity
_all = _colors.concat(_scroll, _opacity, _boxModel, _transform), al = _all.length,
_all = _colors.concat( _opacity, _boxModel, _transform), al = _all.length,
_defaults = {}; //all properties default values
//populate default values object
@ -76,11 +76,11 @@
},
trueColor = function (v) { // replace transparent and transform any color to rgba()/rgb()
if (/rgb|rgba/.test(v)) { // first check if it's a rgb string
var vrgb = v.replace(/[^\d,]/g, '').split(','), y = vrgb[3] ? vrgb[3] : null;
var vrgb = v.replace(/\s|\)/,'').split('(')[1].split(','), y = vrgb[3] ? vrgb[3] : null;
if (!y) {
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]) };
} else {
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: y*1 };
return { r: parseInt(vrgb[0]), g: parseInt(vrgb[1]), b: parseInt(vrgb[2]), a: parseFloat(y) };
}
} else if (/^#/.test(v)) {
var fromHex = hexToRGB(v); return { r: fromHex.r, g: fromHex.g, b: fromHex.b };
@ -99,7 +99,7 @@
rgbToHex = function (r, g, b) { // transform rgb to hex or vice-versa | webkit browsers ignore HEX, always use RGB/RGBA
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
},
hexToRGB = g._htr = function (hex) {
hexToRGB = function (hex) {
var shr = /^#?([a-f\d])([a-f\d])([a-f\d])$/i; // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
hex = hex.replace(shr, function (m, r, g, b) {
return r + r + g + g + b + b;
@ -147,13 +147,13 @@
},
//more internals
getAll = function () { return _tws; },
removeAll = function () { _tws = []; },
add = g._queueTween = function (tw) { _tws.push(tw); },
remove = function (tw) { var i = _tws.indexOf(tw); if (i !== -1) { _tws.splice(i, 1); }},
getAll = function () { return tweens; },
removeAll = function () { tweens = []; },
add = function (tw) { tweens.push(tw); },
remove = function (tw) { var i = tweens.indexOf(tw); if (i !== -1) { tweens.splice(i, 1); }},
stop = function () { if (tick) { _cancelAnimationFrame(tick); tick = null; } },
canTouch = ('ontouchstart' in g || navigator.msMaxTouchPoints) || false, // support Touch?
canTouch = ('ontouchstart' in g || navigator && navigator.msMaxTouchPoints) || false, // support Touch?
touchOrWheel = canTouch ? 'touchstart' : 'mousewheel', mouseEnter = 'mouseenter', //events to prevent on scroll
_requestAnimationFrame = g.requestAnimationFrame || g.webkitRequestAnimationFrame || function (c) { return setTimeout(c, 16) },
_cancelAnimationFrame = g.cancelAnimationFrame || g.webkitCancelRequestAnimationFrame || function (c) { return clearTimeout(c) },
@ -161,72 +161,72 @@
//true scroll container
body = document.body, html = document.getElementsByTagName('HTML')[0],
scrollContainer = /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? body : html,
scrollContainer = navigator && /webkit/i.test(navigator.userAgent) || document.compatMode == 'BackCompat' ? body : html,
_isIE = navigator && (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent) !== null) ? parseFloat( RegExp.$1 ) : false,
_isIE8 = _isIE === 8; // check IE8/IE
// KUTE.js INTERPOLATORS
var number = g._number = function(a,b,v) { // number1, number2, progress
var interpolate = g.Interpolate = {},
number = interpolate.number = function(a,b,v) { // number1, number2, progress
a = +a; b -= a; return a + b * v;
},
unit = g._unit = function(a,b,u,v) { // number1, number2, unit, progress
a = +a; b -= a; return (a + b * v) + u;
unit = interpolate.unit = function(a,b,u,v) { // number1, number2, unit, progress
a = +a; b -= a; return ( a + b * v ) + u;
},
color = g._color = function(a,b,v,h){ // rgba1, rgba2, progress, convertToHex(true/false)
color = interpolate.color = function(a,b,v,h){ // rgba1, rgba2, progress, convertToHex(true/false)
var _c = {}, c, n = number, ep = ')', cm =',', r = 'rgb(', ra = 'rgba(';
for (c in b) { _c[c] = c !== 'a' ? (Math.floor( number(a[c],b[c],v) ) || 0) : (a[c] && b[c]) ? number(a[c],b[c],v) : null; }
for (c in b) { _c[c] = c !== 'a' ? (number(a[c],b[c],v)>>0 || 0) : (a[c] && b[c]) ? (number(a[c],b[c],v) * 100 >> 0 )/100 : null; }
return h ? rgbToHex( _c.r, _c.g, _c.b ) : !_c.a ? r + _c.r + cm + _c.g + cm + _c.b + ep : ra + _c.r + cm + _c.g + cm + _c.b + cm + _c.a + ep;
},
translate = g._translate = function (a,b,u,v){
translate = interpolate.translate = function (a,b,u,v){
var translation = {};
for (var ax in b){
var x1 = a[ax] || 0, x2 = b[ax] || 0;
translation[ax] = x1===x2 ? x2+u : (Math.floor( (x1 + ( x2 - x1 ) * v) * 10) / 10) + u;
translation[ax] = ( a[ax]===b[ax] ? b[ax] : ( (a[ax] + ( b[ax] - a[ax] ) * v ) * 10 >> 0 ) /10 ) + u;
}
return translation.x ? 'translate(' + translation.x + ',' + translation.y + ')' :
'translate3d(' + translation.translateX + ',' + translation.translateY + ',' + translation.translateZ + ')';
},
rotate = g._rotate = function (a,b,u,v){
rotate = interpolate.rotate = function (a,b,u,v){
var rotation = {};
for ( var rx in b ){
rotation[rx] = rx === 'z' ? 'rotate('+ (Math.floor((a[rx] + (b[rx] - a[rx]) * v) * 10 ) / 10) + u + ')'
: rx + '(' + (Math.floor((a[rx] + (b[rx] - a[rx]) * v) * 10 ) / 10) + u + ')';
rotation[rx] = rx === 'z' ? ('rotate('+ (((a[rx] + (b[rx] - a[rx]) * v) * 10 >> 0 ) / 10) + u + ')')
: (rx + '(' + (((a[rx] + (b[rx] - a[rx]) * v) * 10 >> 0 ) / 10) + u + ')');
}
return rotation.z ? rotation.z : (rotation.rotateX||'') + (rotation.rotateY||'') + (rotation.rotateZ||'');
},
skew = g._skew = function (a,b,u,v){
skew = interpolate.skew = function (a,b,u,v){
var skewProp = {};
for ( var sx in b ){
skewProp[sx] = sx + '(' + (Math.floor((a[sx] + (b[sx] - a[sx]) * v) * 10) / 10) + u + ')';
skewProp[sx] = sx + '(' + (((a[sx] + (b[sx] - a[sx]) * v) * 10 >> 0) / 10) + u + ')';
}
return (skewProp.skewX||'') + (skewProp.skewY||'');
},
scale = g._scale = function(a,b,v){
return 'scale(' + (Math.floor((a + (b - a) * v) * 100 ) / 100) + ')';
scale = interpolate.scale = function(a,b,v){
return 'scale(' + (((a + (b - a) * v) * 1000 >> 0 ) / 1000) + ')';
},
// KUTE.js DOM update functions
DOM = g.dom = {},
ticker = g._ticker = function(t) {
DOM = {},
ticker = function(t) {
var i = 0;
while ( i < _tws.length ) {
if ( update.call(_tws[i],t) ) {
while ( i < tweens.length ) {
if ( update.call(tweens[i],t) ) {
i++;
} else {
_tws.splice(i, 1);
tweens.splice(i, 1);
}
}
tick = _requestAnimationFrame(ticker);
},
update = g._update = function(t) {
update = function(t) {
t = t || time.now();
if ( t < this._startTime && this.playing ) { return true; }
var elapsed = Math.min(( t - this._startTime ) / this.options.duration, 1); // calculate progress
var elapsed = Math.min(( t - this._startTime ) / this.options.duration, 1), progress = this.options.easing(elapsed); // calculate progress
for (var p in this._vE){ DOM[p](this._el,p,this._vS[p],this._vE[p],this.options.easing(elapsed),this.options); } //render the CSS update
for (var p in this.valuesEnd){ DOM[p](this.element,p,this.valuesStart[p],this.valuesEnd[p],progress,this.options); } //render the CSS update
if (this.options.update) { this.options.update.call(); } // fire the updateCallback
@ -234,7 +234,10 @@
if (this.options.repeat > 0) {
if ( this.options.repeat < 9999 ) { this.options.repeat--; } else { this.options.repeat = 0; } // we have to make it stop somewhere, infinity is too damn much
if (this.options.yoyo) { this.reversed = !this.reversed; reverse.call(this); } // handle yoyo
if (this.options.yoyo) { // handle yoyo
this.reversed = !this.reversed;
reverse.call(this);
}
this._startTime = (this.options.yoyo && !this.reversed) ? t + this.options.repeatDelay : t; //set the right time for delay
return true;
@ -247,6 +250,7 @@
for (var i = 0, ctl = this.options.chain.length; i < ctl; i++) { // start animating chained tweens
this.options.chain[i].start();
}
//stop ticking when finished
close.call(this);
}
@ -256,90 +260,38 @@
},
// applies the transform origin and perspective
perspective = g._perspective = function () {
if ( this.options.perspective !== undefined && transformProperty in this._vE ) { this._vS[transformProperty]['perspective'] = this._vE[transformProperty]['perspective']; } // element perspective
if ( this.options.transformOrigin !== undefined ) { this._el.style[property('transformOrigin')] = this.options.transformOrigin; } // element transform origin
if ( this.options.perspectiveOrigin !== undefined ) { this._el.style[property('perspectiveOrigin')] = this.options.perspectiveOrigin; } // element perspective origin
if ( this.options.parentPerspective !== undefined ) { this._el.parentNode.style[property('perspective')] = this.options.parentPerspective + 'px'; } // parent perspective
if ( this.options.parentPerspectiveOrigin !== undefined ) { this._el.parentNode.style[property('perspectiveOrigin')] = this.options.parentPerspectiveOrigin; } // parent perspective origin
perspective = function () {
if ( this.options.perspective !== undefined && transformProperty in this.valuesEnd ) { this.valuesStart[transformProperty]['perspective'] = this.valuesEnd[transformProperty]['perspective']; } // element perspective
if ( this.options.transformOrigin !== undefined ) { this.element.style[property('transformOrigin')] = this.options.transformOrigin; } // element transform origin
if ( this.options.perspectiveOrigin !== undefined ) { this.element.style[property('perspectiveOrigin')] = this.options.perspectiveOrigin; } // element perspective origin
if ( this.options.parentPerspective !== undefined ) { this.element.parentNode.style[property('perspective')] = this.options.parentPerspective + 'px'; } // parent perspective
if ( this.options.parentPerspectiveOrigin !== undefined ) { this.element.parentNode.style[property('perspectiveOrigin')] = this.options.parentPerspectiveOrigin; } // parent perspective origin
},
// process properties for _vE and _vS or one of them
preparePropertiesObject = function (t, l) {
var skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {}, propertiesObject = {};
for (var x in t) {
if (_transform.indexOf(x) !== -1) { // transform object gets built here
if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
var ta = ['X', 'Y', 'Z']; //coordinates // translate[x] = pp(x, t[x]);
// plugin connector objects
prepareStart = {}, // check current property value when .to() method is used
crossCheck = {}, // checks for differences between start and end value, try to make sure start unit and end unit are same as well as consistent, stack transforms, process SVG paths
for (var f = 0; f < 3; f++) {
var a = ta[f];
if ( /3d/.test(x) ) {
translateObject['translate' + a] = parseProperty.transform('translate' + a, t[x][f], l);
} else {
translateObject['translate' + a] = ('translate' + a in t) ? parseProperty.transform('translate' + a, t['translate' + a], l) : 0;
}
}
transformObject['translate'] = translateObject;
} else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew
var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'],
rtp = ap === 'rotate' ? rotateObject : skewObject;
for (var r = 0; r < 3; r++) {
var v = ra[r];
if ( t[ap+v] !== undefined && x !== 'skewZ' ) {
rtp[ap+v] = parseProperty.transform(ap+v, t[ap+v]);
}
}
transformObject[ap] = rtp;
} else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation
transformObject[x] = parseProperty.transform(x, t[x], l);
}
propertiesObject[transformProperty] = transformObject;
} else if ( x !== 'transform') {
if ( _boxModel.indexOf(x) !== -1 ) {
propertiesObject[x] = parseProperty.boxModel(x,t[x]);
} else if (_opacity.indexOf(x) !== -1 || _scroll.indexOf(x) !== -1) {
propertiesObject[x] = parseProperty.unitless(x,t[x]);
} else if (_colors.indexOf(x) !== -1) {
propertiesObject[x] = parseProperty.colors(x,t[x]);
} else if (x in parseProperty) { propertiesObject[x] = parseProperty[x](x,t[x],l); } // or any other property from css/ attr / svg / third party plugins
}
}
return propertiesObject;
},
// process properties object | registers the plugins prepareStart functions
// parse properties object
// string parsing and property specific value processing
parseProperty = {
boxModel : function(p,v,l){ // box model | text props | radius props
parseProperty = { // we already start working on core supported properties
boxModel : function(p,v){
if (!(p in DOM)){
DOM[p] = function(l,p,a,b,v){
l.style[p] = Math.floor(number(a,b,v))+'px';
l.style[p] = ( v > 0.99 || v < 0.01 ? ((number(a,b,v)*10)>>0)/10 : (number(a,b,v) ) >> 0 ) + 'px' ;
}
}
var boxValue = trueDimension(v);
return boxValue.u === '%' ? boxValue.v * l.offsetWidth / 100 : boxValue.v;
return boxValue.u === '%' ? boxValue.v * this.element.offsetWidth / 100 : boxValue.v;
},
transform : function(p,v,l) { // transform prop / value
if (!('transform' in DOM)) {
transform : function(p,v) {
if (!(transformProperty in DOM)) {
DOM[transformProperty] = function(l,p,a,b,v,o){
var t = '', r = '', sk = '', s = '', pp = '';
for (var tp in b){
if (tp === 'perspective'){
pp += a[tp];
} else if (tp === 'translate'){
t += translate(a[tp],b[tp],'px',v);
} else if (tp === 'rotate'){
r += rotate(a[tp],b[tp],'deg',v);
} else if (tp === 'skew'){
sk += skew(a[tp],b[tp],'deg',v);
} else if (tp === 'scale'){
s += scale(a[tp],b[tp],v);
}
}
l.style[p] = pp + t + r + sk + s;
l.style[p] = (a.perspective||'')
+ (a.translate ? translate(a.translate,b.translate,'px',v):'')
+ (a.rotate ? rotate(a.rotate,b.rotate,'deg',v):'')
+ (a.skew ? skew(a.skew,b.skew,'deg',v):'')
+ (a.scale ? scale(a.scale,b.scale,v):'');
}
}
@ -348,23 +300,23 @@
if (p === 'translate3d') {
var t3d = v.split(','), t3d0 = trueDimension(t3d[0]), t3d1 = trueDimension(t3d[1], t3d2 = trueDimension(t3d[2]));
return {
translateX : t3d0.u === '%' ? (t3d0.v * l.offsetWidth / 100) : t3d0.v,
translateY : t3d1.u === '%' ? (t3d1.v * l.offsetHeight / 100) : t3d1.v,
translateZ : t3d2.u === '%' ? (t3d2.v * (l.offsetHeight + l.offsetWidth) / 200) : t3d2.v // to be changed with something like element and/or parent perspective
translateX : t3d0.u === '%' ? (t3d0.v * this.element.offsetWidth / 100) : t3d0.v,
translateY : t3d1.u === '%' ? (t3d1.v * this.element.offsetHeight / 100) : t3d1.v,
translateZ : t3d2.u === '%' ? (t3d2.v * (this.element.offsetHeight + this.element.offsetWidth) / 200) : t3d2.v // to be changed with something like element and/or parent perspective
};
} else if (/^translate(?:[XYZ])$/.test(p)) {
var t1d = trueDimension(v), percentOffset = /X/.test(p) ? l.offsetWidth / 100 : /Y/.test(p) ? l.offsetHeight / 100 : (l.offsetWidth+l.offsetHeight) / 200;
var t1d = trueDimension(v), percentOffset = /X/.test(p) ? this.element.offsetWidth / 100 : /Y/.test(p) ? this.element.offsetHeight / 100 : (this.element.offsetWidth+this.element.offsetHeight) / 200;
return t1d.u === '%' ? (t1d.v * percentOffset) : t1d.v;
} else if (p === 'translate') {
var tv = typeof v === 'string' ? v.split(',') : v, t2d = {}, t2dv,
t2d0 = trueDimension(tv[0]), t2d1 = tv.length ? trueDimension(tv[1]) : {v: 0, u: 'px'};
if (tv instanceof Array) {
t2d.x = t2d0.u === '%' ? (t2d0.v * l.offsetWidth / 100) : t2d0.v,
t2d.y = t2d1.u === '%' ? (t2d1.v * l.offsetHeight / 100) : t2d1.v
t2d.x = t2d0.u === '%' ? (t2d0.v * this.element.offsetWidth / 100) : t2d0.v,
t2d.y = t2d1.u === '%' ? (t2d1.v * this.element.offsetHeight / 100) : t2d1.v
} else {
t2dv = trueDimension(tv);
t2d.x = t2dv.u === '%' ? (t2dv.v * l.offsetWidth / 100) : t2dv.v,
t2d.x = t2dv.u === '%' ? (t2dv.v * this.element.offsetWidth / 100) : t2dv.v,
t2d.y = 0
}
@ -383,21 +335,21 @@
return parseFloat(v); // this must be parseFloat(v)
}
},
unitless : function(p,v){ // scroll | opacity | unitless
unitless : function(p,v){ // scroll | opacity
if (/scroll/.test(p) && !(p in DOM) ){
DOM[p] = function(l,p,a,b,v) {
l.scrollTop = Math.floor(number(a,b,v));
l.scrollTop = (number(a,b,v))>>0;
};
} else if (p === 'opacity') {
if (!(p in DOM)) {
if (_isIE8) {
DOM[p] = function(l,p,a,b,v) {
var st = "alpha(opacity=", ep = ')';
l.style.filter = st + Math.floor(number(a,b,v) * 100) + ep;
l.style.filter = st + ((number(a,b,v) * 100)>>0) + ep;
};
} else {
DOM[p] = function(l,p,a,b,v) {
l.style.opacity = Math.floor(number(a,b,v) * 100)/100;
l.style.opacity = ((number(a,b,v) * 100)>>0)/100;
};
}
}
@ -413,13 +365,60 @@
return trueColor(v);
}
},
reverse = g._reverse = function () {
// process properties for _vE and _vS or one of them
preparePropertiesObject = function(obj, fn) { // this, props object, type: start/end
var element = this.element, propertiesObject = fn === 'start' ? this.valuesStart : this.valuesEnd,
skewObject = {}, rotateObject = {}, translateObject = {}, transformObject = {};
for (var x in obj) {
if (_transform.indexOf(x) !== -1) { // transform object gets built here
if ( /^translate(?:[XYZ]|3d)$/.test(x) ) { //process translate3d
var ta = ['X', 'Y', 'Z']; //coordinates // translate[x] = pp(x, obj[x]);
for (var f = 0; f < 3; f++) {
var a = ta[f];
if ( /3d/.test(x) ) {
translateObject['translate' + a] = parseProperty.transform.call(this,'translate' + a, obj[x][f]);
} else {
translateObject['translate' + a] = ('translate' + a in obj) ? parseProperty.transform.call(this,'translate' + a, obj['translate' + a]) : 0;
}
}
transformObject['translate'] = translateObject;
} else if ( /^rotate(?:[XYZ])$|^skew(?:[XY])$/.test(x) ) { //process rotation/skew
var ap = /rotate/.test(x) ? 'rotate' : 'skew', ra = ['X', 'Y', 'Z'],
rtp = ap === 'rotate' ? rotateObject : skewObject;
for (var r = 0; r < 3; r++) {
var v = ra[r];
if ( obj[ap+v] !== undefined && x !== 'skewZ' ) {
rtp[ap+v] = parseProperty.transform.call(this,ap+v, obj[ap+v]);
}
}
transformObject[ap] = rtp;
} else if ( /(rotate|translate|scale)$/.test(x) ) { //process 2d translation / rotation
transformObject[x] = parseProperty.transform.call(this, x, obj[x]);
}
propertiesObject[transformProperty] = transformObject;
} else {
if ( _boxModel.indexOf(x) !== -1 ) {
propertiesObject[x] = parseProperty.boxModel.call(this,x,obj[x]);
} else if (_opacity.indexOf(x) !== -1 || x === 'scroll') {
propertiesObject[x] = parseProperty.unitless.call(this,x,obj[x]);
} else if (_colors.indexOf(x) !== -1) {
propertiesObject[x] = parseProperty.colors.call(this,x,obj[x]);
} else if (x in parseProperty) { // or any other property from css/ attr / svg / third party plugins
propertiesObject[x] = parseProperty[x].call(this,x,obj[x]);
}
}
}
},
reverse = function () {
if (this.options.yoyo) {
for (var p in this._vE) {
var tmp = this._vSR[p];
this._vSR[p] = this._vE[p];
this._vE[p] = tmp;
this._vS[p] = this._vSR[p];
for (var p in this.valuesEnd) {
var tmp = this.valuesRepeat[p];
this.valuesRepeat[p] = this.valuesEnd[p];
this.valuesEnd[p] = tmp;
this.valuesStart[p] = this.valuesRepeat[p];
}
}
},
@ -428,17 +427,17 @@
if (this.options.yoyo && this.reversed===true) { reverse.call(this); this.reversed = false; }
this.playing = false;
setTimeout(function(){ if (!_tws.length) { stop(); } }, 48); // when all animations are finished, stop ticking after ~3 frames
setTimeout(function(){ if (!tweens.length) { stop(); } }, 48); // when all animations are finished, stop ticking after ~3 frames
},
scrollOut = function(){ //prevent scroll when tweening scroll
if (( 'scroll' in this._vE || 'scrollTop' in this._vE ) && document.body.getAttribute('data-tweening')) {
if (( 'scroll' in this.valuesEnd || 'scrollTop' in this.valuesEnd ) && document.body.getAttribute('data-tweening')) {
document.removeEventListener(touchOrWheel, preventScroll, false);
document.removeEventListener(mouseEnter, preventScroll, false);
document.body.removeAttribute('data-tweening');
}
},
scrollIn = function(){
if (( 'scroll' in this._vE || 'scrollTop' in this._vE ) && !document.body.getAttribute('data-tweening')) {
if (( 'scroll' in this.valuesEnd || 'scrollTop' in this.valuesEnd ) && !document.body.getAttribute('data-tweening')) {
document.addEventListener(touchOrWheel, preventScroll, false);
document.addEventListener(mouseEnter, preventScroll, false);
document.body.setAttribute('data-tweening', 'scroll');
@ -451,13 +450,11 @@
return easing[fn]; // regular Robert Penner Easing Functions
}
},
prepareStart = {},
crossCheck = {},
getStartValues = function () { // stack transform props for .to() chains
var startValues = {}, currentStyle = getInlineStyle(this._el,'transform'),
var startValues = {}, currentStyle = getInlineStyle(this.element,'transform'),
deg = ['rotate','skew'], ax = ['X','Y','Z'];
for (var p in this._vS){
for (var p in this.valuesStart){
if ( _transform.indexOf(p) !== -1 ) {
var r2d = (/(rotate|translate|scale)$/.test(p));
if ( /translate/.test(p) && p !== 'translate' ) {
@ -468,49 +465,49 @@
for (var d=0; d<2; d++) {
for (var a = 0; a<3; a++) {
var s = deg[d]+ax[a];
if (_transform.indexOf(s) !== -1 && (s in this._vS) ) { startValues[s] = currentStyle[s] || _defaults[s]; }
if (_transform.indexOf(s) !== -1 && (s in this.valuesStart) ) { startValues[s] = currentStyle[s] || _defaults[s]; }
}
}
}
} else {
if ( _scroll.indexOf(p) === -1 ) {
if ( p !== 'scroll' ) {
if (p === 'opacity' && _isIE8 ) { // handle IE8 opacity
var currentOpacity = getCurrentStyle(this._el,'filter');
var currentOpacity = getCurrentStyle(this.element,'filter');
startValues['opacity'] = typeof currentOpacity === 'number' ? currentOpacity : _defaults['opacity'];
} else {
if ( _all.indexOf(p) !== -1 ) {
startValues[p] = getCurrentStyle(this._el,p) || d[p];
startValues[p] = getCurrentStyle(this.element,p) || d[p];
} else { // plugins register here
startValues[p] = p in prepareStart ? prepareStart[p](this._el,p,this._vS[p]) : 0;
startValues[p] = p in prepareStart ? prepareStart[p].call(this,p,this.valuesStart[p]) : 0;
}
}
} else {
startValues[p] = this._el === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this._el.scrollTop;
startValues[p] = this.element === scrollContainer ? (g.pageYOffset || scrollContainer.scrollTop) : this.element.scrollTop;
}
}
}
for ( var p in currentStyle ){ // also add to _vS values from previous tweens
if ( _transform.indexOf(p) !== -1 && (!( p in this._vS )) ) {
if ( _transform.indexOf(p) !== -1 && (!( p in this.valuesStart )) ) {
startValues[p] = currentStyle[p] || _defaults[p];
}
}
this._vS = {};
this._vS = preparePropertiesObject(startValues,this._el);
this.valuesStart = {};
preparePropertiesObject.call(this,startValues,'start');
if ( transformProperty in this._vE ) { // let's stack transform
for ( var sp in this._vS[transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale
if ( transformProperty in this.valuesEnd ) { // let's stack transform
for ( var sp in this.valuesStart[transformProperty]) { // sp is the object corresponding to the transform function objects translate / rotate / skew / scale
if ( sp !== 'perspective') {
if ( typeof this._vS[transformProperty][sp] === 'object' ) {
for ( var spp in this._vS[transformProperty][sp] ) { // 3rd level
if ( typeof this._vE[transformProperty][sp] === 'undefined' ) { this._vE[transformProperty][sp] = {}; }
if ( typeof this._vS[transformProperty][sp][spp] === 'number' && typeof this._vE[transformProperty][sp][spp] === 'undefined' ) {
this._vE[transformProperty][sp][spp] = this._vS[transformProperty][sp][spp];
if ( typeof this.valuesStart[transformProperty][sp] === 'object' ) {
for ( var spp in this.valuesStart[transformProperty][sp] ) { // 3rd level
if ( typeof this.valuesEnd[transformProperty][sp] === 'undefined' ) { this.valuesEnd[transformProperty][sp] = {}; }
if ( typeof this.valuesStart[transformProperty][sp][spp] === 'number' && typeof this.valuesEnd[transformProperty][sp][spp] === 'undefined' ) {
this.valuesEnd[transformProperty][sp][spp] = this.valuesStart[transformProperty][sp][spp];
}
}
} else if ( typeof this._vS[transformProperty][sp] === 'number' ) {
if ( typeof this._vE[transformProperty][sp] === 'undefined' ) { // scale
this._vE[transformProperty][sp] = this._vS[transformProperty][sp];
} else if ( typeof this.valuesStart[transformProperty][sp] === 'number' ) {
if ( typeof this.valuesEnd[transformProperty][sp] === 'undefined' ) { // scale
this.valuesEnd[transformProperty][sp] = this.valuesStart[transformProperty][sp];
}
}
}
@ -573,47 +570,9 @@
};
easing.easingBounceInOut = function(t) { if ( t < 0.5 ) return easing.easingBounceIn( t * 2 ) * 0.5; return easing.easingBounceOut( t * 2 - 1 ) * 0.5 + 0.5;};
// these methods run faster when defined outside
var start = g._start = function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
scrollIn.call(this);
if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
perspective.apply(this); // apply the perspective and transform origin
for ( var e in this._vE ) {
if (e in crossCheck && this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for to() method
this._vSR[e] = this._vS[e];
}
// now it's a good time to start
add(this);
this.playing = true;
this.paused = false;
this._startFired = false;
this._startTime = t || time.now();
this._startTime += this.options.delay;
if (!this._startFired) {
if (this.options.start) { this.options.start.call(); }
this._startFired = true;
}
!tick && ticker();
return this;
},
play = g._play = function () {
if (this.paused && this.playing) {
this.paused = false;
if (this.options.resume) { this.options.resume.call(); }
this._startTime += time.now() - this._pauseTime;
add(this);
!tick && ticker(); // restart ticking if stopped
}
return this;
},
// single Tween object construct
Tween = g._Tween = function (_el, _vS, _vE, _o) {
this._el = 'scroll' in _vE && (_el === undefined || _el === null) ? scrollContainer : _el; // element animation is applied to
// single Tween object construct
var Tween = function (_el, _vS, _vE, _o) {
this.element = 'scroll' in _vE && (_el === undefined || _el === null) ? scrollContainer : _el; // element animation is applied to
this.playing = false;
this.reversed = false;
@ -626,16 +585,19 @@
this.options = {}; for (var o in _o) { this.options[o] = _o[o]; }
this.options.rpr = _o.rpr || false; // internal option to process inline/computed style at start instead of init true/false
this._vSR = {}; // internal valuesStartRepeat
this._vE = preparePropertiesObject(_vE,_el); // valuesEnd
this._vS = _o.rpr ? _vS : preparePropertiesObject(_vS,_el); // valuesStart
this.valuesRepeat = {}; // internal valuesStartRepeat
this.valuesEnd = {}; // valuesEnd
this.valuesStart = {}; // valuesStart
if ( this.options.perspective !== undefined && transformProperty in this._vE ) { // element transform perspective
var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px) ';
this._vE[transformProperty]['perspective'] = perspectiveString;
preparePropertiesObject.call(this,_vE,'end'); // valuesEnd
if ( _o.rpr ) { this.valuesStart = _vS; } else { preparePropertiesObject.call(this,_vS,'start'); } // valuesStart
if ( this.options.perspective !== undefined && transformProperty in this.valuesEnd ) { // element transform perspective
var perspectiveString = 'perspective('+parseInt(this.options.perspective)+'px)';
this.valuesEnd[transformProperty].perspective = perspectiveString;
}
for ( var e in this._vE ) {
for ( var e in this.valuesEnd ) {
if (e in crossCheck && !_o.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for fromTo() method
}
@ -647,18 +609,56 @@
this.options.duration = _o.duration || 700; // duration option | default
this.options.delay = _o.delay || 0; // delay option | default
this.repeat = this.options.repeat; // we cache the number of repeats to be able to put it back after all cycles finish
},
// tween control and chain
TweenProto = Tween.prototype = {
start : function (t) { // move functions that use the ticker outside the prototype to be in the same scope with it
scrollIn.call(this);
this.start = start; this.play = play; this.resume = play;
this.pause = function() {
if ( this.options.rpr ) { getStartValues.apply(this); } // on start we reprocess the valuesStart for TO() method
perspective.apply(this); // apply the perspective and transform origin
for ( var e in this.valuesEnd ) {
if (e in crossCheck && this.options.rpr) crossCheck[e].call(this); // this is where we do the valuesStart and valuesEnd check for to() method
this.valuesRepeat[e] = this.valuesStart[e];
}
// now it's a good time to start
tweens.push(this);
this.playing = true;
this.paused = false;
this._startFired = false;
this._startTime = t || time.now();
this._startTime += this.options.delay;
if (!this._startFired) {
if (this.options.start) { this.options.start.call(); }
this._startFired = true;
}
!tick && ticker();
return this;
},
play : function () {
if (this.paused && this.playing) {
this.paused = false;
if (this.options.resume) { this.options.resume.call(); }
this._startTime += time.now() - this._pauseTime;
add(this);
!tick && ticker(); // restart ticking if stopped
}
return this;
},
resume : function () { return this.play(); },
pause : function() {
if (!this.paused && this.playing) {
remove(this);
this.paused = true;
this._pauseTime = time.now();
this._pauseTime = (time.now() * 1000 >> 0) / 1000;
if (this.options.pause) { this.options.pause.call(); }
}
return this;
};
this.stop = function () {
},
stop : function () {
if (!this.paused && this.playing) {
remove(this);
this.playing = false;
@ -670,13 +670,13 @@
close.call(this);
}
return this;
};
this.chain = function () { this.options.chain = arguments; return this; };
this.stopChainedTweens = function () {
for (var i = 0, ctl =this.options.chain.length; i < ctl; i++) {
},
chain : function() { this.options.chain = arguments; return this; },
stopChainedTweens : function () {
for (var i = 0, ctl = this.options.chain.length; i < ctl; i++) {
this.options.chain[i].stop();
}
};
}
},
// the multi elements Tween constructs
@ -728,12 +728,13 @@
},
allFromTo = function (els, f, to, o) {
var _els = selector(els,true);
return new TweensFT(_els, f, to, o);
return new TweensFT(_els, f, to, o);
};
return { // export core methods to public for plugins
property: property, getPrefix: getPrefix, selector: selector, processEasing : processEasing, // utils
to: to, fromTo: fromTo, allTo: allTo, allFromTo: allFromTo, // main methods
ticker : ticker, tweens : tweens, update: update, dom : DOM, // update
parseProperty: parseProperty, prepareStart: prepareStart, crossCheck : crossCheck, Tween : Tween, // property parsing & preparation | Tween | crossCheck
truD: trueDimension, truC: trueColor, rth: rgbToHex, htr: hexToRGB, getCurrentStyle: getCurrentStyle, // property parsing
};