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

Added Text Plugin, updated docs

Browse source
This commit is contained in:
thednp 2016-03-18 16:23:23 +02:00
parent f909b46a7e
commit ac8f5ebe05
20 changed files with 539 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
about.html
View file

@ -50,6 +50,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -58,6 +59,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
@ -88,8 +90,8 @@
</ol>
<p>Basically, this is it!</p>
<h2 id="performance">A Word On Performance</h2>
<p>As said before, performance varies from case to case; this chapter aims to explain what you should expect working with animation engines in these various scenarios at maximum stress, usually when your CPU cooler starts to work really hard, and how scalable performance can really be on various machines, operating systems or mobile devices.</p>
<h2 id="performance">A Note On Performance</h2>
<p>As said before, performance varies from case to case; this chapter aims to explain what you should expect working with animation engines in these various scenarios at maximum stress, usually when your CPU cooler starts to work really hard, and how scalable performance can really be on various machines, operating systems or mobile devices. We'll dig into each case, by property type or anything that can be considered a factor of influence.</p>
<h3>Function Nesting</h3>
<p>This could be one of the most important factors that influence performance, because we neglect this fact most of the time and changing the scope of an animation engine is important to look after. A quick example would be when we create tween objects on events such as <code>click</code>, <code>scroll</code> or <code>resize</code>, we basically set a totally different scope for the animation and we fill the memory with large chunks of trash/jank, especially on events like <code>resize</code>.</p>
@ -107,7 +109,7 @@
<h3>Box Model</h3>
<p><span class="ion-nuclear media"></span>We compared position with transition above, but now we are going to talk about other issues related to <strong>resizers</strong>: <code>width</code>, <code>height</code>, <code>margin</code>, <code>padding</code> and <code>borderWidth</code> or any of their variations. The code execution is super fast, but when resizing the window while animations are running, the browser is also computing the resize handlers, the animation performance is very very low on <strong>all</strong> browsers, especially when you animate these resize properties. When this <strong>toxic combination</strong> occurs animating a large amount of elements to animate could crash any browser, no exception, and I think any developer should know about this.</p>
<p>The <code>resize</code> event triggered by these resizer properties can cause some <strong>severe issues with legacy browsers</strong> such as IE8. These good old browsers don't understand much about Javascript driven layout changes and thus skip/fail to execute any handlers attached to window resize event bubbles.</p>
<p>A workaound the resizers effect on the layout would be to use them only for absolute positioned elements, this way the layout will not need to be repainted and the recomposition is limited to the element itself. If not, and you are required to provide legacy support, you must DISABLE any resize handlers for IE8 and any other browser that runs slow or crashes. You should also consider not using any resize animation for legacy browsers especially when usability and larger reach is expected.</p>
<p>A workaound for the resizers' effect on the layout would be to use them only for absolute positioned elements, this way the layout will not need to be repainted and the recomposition is limited to the elements themselves. If not, and you are required to provide legacy support, you must DISABLE any resize handlers for IE8 and any other browser that runs slow or crashes. You should also consider not using any resize animation for legacy browsers especially when usability and larger reach is expected.</p>
<h3>RGB and HEX</h3>
<p><span class="ion-android-color-palette media"></span>When animating any color property such as (text) <code>color</code> or <code>background-color</code>, KUTE.js always uses/converts to RGB/RGBA, but there is a <code>keepHex:true</code> tween option that overrides that. Still some browsers such as Chrome will still show you the computed style for your color as RGB no matter what. The conversion process will decrease performance, making <kbd>RGB</kbd> the <strong>winner</strong>.</p>
@ -123,6 +125,10 @@
<p><span class="ion-trash-a media"></span>The goal of the development strategy is to be able to execute the script, update layout and repaint, all under 16 miliseconds, so that the animation runs constantly at 60fps. However running some repeatable animations for a large amount of elements would really give garbage collectors a lot of work and thus some frames take more than 16 miliseconds. The more properties and/or elements, the more work.</p>
<p>While garbage collection is a great way modern browsers use to clean the memory, sometimes the garbage collector can jump in anytime, cousing drops in the order of miliseconds. Still, if it's the case, there are ways to help composing the layout faster, but we will see that in the performance testing <a href="performance">page</a>.</p>
<h3>Property Value Complexity</h3>
<p>Just like the high amount of simultaneous animations influence performance, the property value complexity is also an important factor. If we were to compare all the supported properties in terms of complexity, the list would go like this (from most expensive to least): path morphing, regular transform, matrix3d (not yet supported), box-shadow / text-shadow, colors, box model<span style="color:red">*</span>, unitless props (scroll, opacity).</p>
<p>The <span style="color:red">*</span> wants to emphasize the fact that box model properties of type resizers have additional performance drawbacks as discussed in a previous chapter.</p>
<h3>OSs, Desktops and Mobiles</h3>
<p><span class="ion-social-tux media"></span>The performance tests have been performed mainly on Microsoft Windows 8.1 and Ubuntu Linux 14.04 Trusty Tahr with latest nVidia graphics drivers on both OSs, all set up for maximum performance. The browsers are obviously Firefox (both OSs), Google Chrome (both OSs), Opera (both OSs) and IE11 (Win8).</p>
<p><span class="ion-social-windows media"></span>The results show <strong>Windows</strong> based browsers came better than Ubuntu based ones, mainly because of DirectX and better drivers that greatly improve hardware accelerated graphics, while Linux still faces some noticeable issues with vertical sync among many others, but hey it's a work in progress and it's open source!</p>
@ -141,7 +147,7 @@
<h2>KUTE.js Project</h2>
<p>KUTE.js continues what was started with <strong>jQueryTween</strong> (removed) and the main goal is to improve usability, compatibility, code quality and performance. KUTE.js includes a jQuery plugin to help you easily implement it in your jQuery applications, and also packs a set of tools such as bezier and physics based easing functions, all elegantly packed for convenience and distributed via CDN.</p>
<p>It all started with a fork of the popular <a href="https://github.com/tweenjs/tween.js" target="_blank">tween.js</a> and ended up having a KUTE.js version 0.9.5 that's almost as good as the boss, <a href="https://greensock.com" target="_blank">GSAP</a>, at least in terms of performance and browser support. TweenMax have been an outstanding source of wonderful coding practices, and a very tough competitor.</p>
<p>In the hystory of the making there were consistent contributions of <a href="https://github.com/dalisoft" target="_blank">Dav</a> aka @dalisoft for features such as play &amp; pause, as well as for performance related issues. Generally I would stress that the code is a joint work of me and Dav. Big thanks Dav, well done.</p>
<p>In the hystory of the making there were consistent contributions of <a href="https://github.com/dalisoft" target="_blank">Dav</a> aka @dalisoft for features such as play &amp; pause, <a href="text.html">Text Plugin</a>, as well as for performance related issues. Generally I would stress that the code is a joint work of me and Dav. Big thanks Dav, well done.</p>
<p>Also I would like to thank <a href="http://ingwie.me/" target="_blank">Ingwie Phoenix</a> for the npm/Bower and UMD implementations.</p>
<ul id="share" class="nav">

54
api.html
View file

@ -9,7 +9,7 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="A detailed API documentation on KUTE.js main methods, options and easing functions.">
<meta name="description" content="A detailed API documentation on KUTE.js public methods.">
<meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
@ -61,6 +61,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -69,6 +70,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li class="active"><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
@ -219,56 +221,6 @@ tween2.chain(tweensCollection2.tweens);
</code></pre>
</div>
<div class="content-wrap">
<h2 id="tweenoptions">Tween Options</h2>
<h3>Common Options</h3>
<p>These options affect all types of tweens, no matter the properties used or context.</p>
<p><kbd>duration: 500</kbd> option allows you to set the animation duration in miliseconds. The default value is <strong>700</strong>.</p>
<p><kbd>repeat: 20</kbd> option allows you to run the animation of given tween multiple times. The default value is <strong>0</strong>.</p>
<p><kbd>delay: 500</kbd> option allows you to delay the tween animation for a certain number of miliseconds. The default value is <strong>0</strong>.</p>
<p><kbd>offset: 200</kbd> option is only for <code>.allTo()</code> and <code>.allFromTo()</code> methods. This allows you to set a base delay in miliseconds that increases with each element in the collection. This has no effect on other methods and the default value is <strong>0</strong>.</p>
<p><kbd>repeatDelay: 500</kbd> option allows you to set a number of miliseconds delay between repeatable animations. If <code>repeat</code> option is set to <strong>0</strong>, will produce no effect. The default value is <strong>0</strong>.</p>
<p><kbd>yoyo: true/false</kbd> option makes use of the internal reverse functionality to also animate from <b>end</b> to <b>start</b> for a given tween. This option requires that you use the <code>repeat</code> option with at least value <b>1</b>. The default value is <strong>false</strong>.</p>
<p><kbd>easing: 'easingCubicInOut'</kbd> option allows you to use a custom easing function for your animation. For more info on the easing functions, you need to see the example pages. The default value is <strong>linear</strong>.</p>
<h3>Transform Options</h3>
<p>These options only affect animation involving any property from CSS3 <code>transform</code> specs and have no effect on other CSS properties. While you can set <code>perspective</code> or <code>perspective origin</code> via CSS, these options are here to help, especially with full browser support and preffix free handling.</p>
<p><kbd>perspective: 500</kbd> option allows you to set a 3D transformation <code>perspective</code> for a given HTML element that is subject to transform animation. No default value.</p>
<p><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.</p>
<p><kbd>parentPerspective: 500</kbd> option allows you to set a 3D <code>perspective</code> for the <strong>parent</strong> of the HTML element subject to the transform animation.</p>
<p><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for the parent of the HTML element subject to the transform animation. Also like the above similar options, this options only accepts valid CSS values.</p>
<p><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.</p>
<h3>SVG Options</h3>
<p>These options only affect animation of the <code>path</code> tween property, or what you know as SVG morphing.</p>
<p><kbd>showMorphInfo: true</kbd> when <code>true</code> the script will log valuable information about the morph in order to help you maximize both performance and visuals of the morph.</p>
<p><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power consumption.</p>
<p><kbd>morphIndex: Number</kbd> option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".</p>
<p><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape.</p>
<p><kbd>reverseSecondPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the SECOND shape.</p>
<h3>Callback Options</h3>
<p>These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.</p>
<p><kbd>start: function</kbd> option allows you to set a function to run once tween animation starts.</p>
<p><kbd>update: function</kbd> option allows you to set a function to run on every frame.</p>
<p><kbd>pause: function</kbd> option allows you to set a function to run when animation is paused.</p>
<p><kbd>resume: function</kbd> option allows you to set a function to run when animation is resumed.</p>
<p><kbd>stop: function</kbd> option allows you to set a function to run when animation is stopped.</p>
<p><kbd>complete: function</kbd> option allows you to set a function to run when animation is finished.</p>
<p>A quick example would look like this:</p>
<pre><code class="language-javascript">//define a function
var callback = function(){
//do some foo
}
//create object and start animating already
KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
</code></pre>
<h3>Other</h3>
<p><kbd>keepHex: true</kbd> option allows you to always use <code>HEX</code> color format, even if you have used <code>RGB</code> or <code>RGBA</code>. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.</p>
</div>
<div class="content-wrap">
<ul id="share" class="nav">

9
assets/css/kute.css
View file

@ -212,7 +212,7 @@ h1, h3, [class*="col"] > h4 {margin: 0 0 20px}
@media (max-width: 479px){
.columns > [class*="col"] { float:none; width: 100%; }
}
.frontpage { margin-top:27% }
.table { display: table; height: 480px }
.cell { display: table-cell; vertical-align: middle }
@ -271,6 +271,7 @@ hr {
#share .icon {font-size: 24px; line-height: 1}
/* buttons */
.btns .btn {opacity: 0; float: left; line-height: 1; margin: 0 3px 3px 0}
.btn { padding: 12px 15px; color:#fff; border:0; background-color: #999; line-height: 44px; }
.bg-gray { color:#fff; background-color: #555; fill: #555 }
.btn.active { background-color: #2196F3 }
@ -322,6 +323,12 @@ hr {
.nav .btn-group.open ul {
top: 43px;
}
@media (max-width: 768px){
.nav .btn-group.open ul {
top: 30px;
}
#easings {left: auto; right: 0}
}
/* Style the scrolBar for modern browsers */
.btn-group ul::-webkit-scrollbar {

10
assets/js/css.js
View file

@ -6,11 +6,11 @@ var isIE = (new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})").exec(navigator.userAgent)
/* RADIUS EXAMPLES */
var radiusBtn = document.getElementById('radiusBtn');
var allRadius = KUTE.to('#allRadius',{borderRadius:80},{easing:'easingCubicOut', repeat: 1, yoyo: true});
var tlRadius = KUTE.to('#tlRadius',{borderTopLeftRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
var trRadius = KUTE.to('#trRadius',{borderTopRightRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
var blRadius = KUTE.to('#blRadius',{borderBottomLeftRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
var brRadius = KUTE.to('#brRadius',{borderBottomRightRadius:150},{easing:'easingCubicOut', repeat: 1, yoyo: true});
var allRadius = KUTE.to('#allRadius',{borderRadius:80},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
var tlRadius = KUTE.to('#tlRadius',{borderTopLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
var trRadius = KUTE.to('#trRadius',{borderTopRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
var blRadius = KUTE.to('#blRadius',{borderBottomLeftRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
var brRadius = KUTE.to('#brRadius',{borderBottomRightRadius:150},{duration: 1500, easing:'easingCubicOut', repeat: 1, yoyo: true});
radiusBtn.addEventListener('click',function(){
if (!allRadius.playing) { allRadius.start(); tlRadius.start(); trRadius.start(); blRadius.start(); brRadius.start(); }
}, false);

22
assets/js/home.js
View file

@ -1,6 +1,10 @@
// vars
var block = document.getElementById('blocks'),
var textOpened = false,
block = document.getElementById('blocks'),
bs = block.querySelectorAll('.bg'),
h2 = document.querySelector('h2'),
lead = document.querySelector('.lead'),
btns = document.querySelector('.btns').querySelectorAll('.btn'),
b = block.querySelector('.bg'),
isIE = /ie/.test(document.documentElement.className),
isIE8 = /ie8/.test(document.documentElement.className),
@ -15,7 +19,7 @@ window.addEventListener('resize',resizeHandler,false);
replay.addEventListener('click',runOnClick,false);
function resizeHandler(e) {
var css = window.getComputedStyle(b),
var css = window.getComputedStyle(b,null),
bw = parseInt(css.width), i = 0;
for (i;i<9;i++){
bs[i].style.minHeight = bw+'px';
@ -85,13 +89,23 @@ function closeTheAnimations() {
}
function runAnimations() {
var t1 = KUTE.fromTo(block,{left:0},{left:150},{duration:1000, easing: 'easingCubicIn', start: openTheAnimations}).start(),
var fn = !textOpened ? openText : null,
t1 = KUTE.fromTo(block,{left:0},{left:150},{duration:1000, easing: 'easingCubicIn', start: openTheAnimations}).start(),
t2 = KUTE.fromTo(block,{left:150},{left:0},{duration:2500, easing: 'easingElasticOut', start: openTheAnimations}),
t3 = KUTE.fromTo(block,{rotateZ:0,rotateY:-10},{rotateZ:-20,rotateY:25},{duration:2500, easing: 'easingQuadraticInOut'}).start(),
t4 = KUTE.fromTo(block,{rotateZ:-20,rotateY:385},{rotateZ:0,rotateY:-10},{duration:3500, delay: 3600, easing: 'easingQuadraticInOut'});
t4 = KUTE.fromTo(block,{rotateZ:-20,rotateY:385},{rotateZ:0,rotateY:-10},{duration:3500, delay: 3600, easing: 'easingQuadraticInOut', start: fn});
t1.chain(t2);
t3.chain(t4);
doBlockAnimations();
}
function openText(){
var hd = KUTE.to(h2, {text: 'Welcome Developers!'}, {delay: 4500, duration:2000, easing: 'easingCubicInOut'}).start(),
ld = KUTE.to(lead, {text: 'KUTE.js is a Javascript animation engine with <strong>top performance</strong>, memory efficient & modular code. It delivers a whole bunch of tools to help you create great custom animations.'}, {duration:4000, easing: 'easingCubicInOut'});
btnst = KUTE.allFromTo(btns, {rotate: 45, opacity: 0 }, { rotate: 0, opacity: 1 }, {transformOrigin: '250px center 0px', offset: 200, duration:700, easing: 'easingCubicInOut'});
hd.chain(ld);
ld.chain(btnst);
textOpened = true;
}

35
assets/js/text.js Normal file
View file

@ -0,0 +1,35 @@
// number increment
var numText = document.getElementById('numText'),
numBtn = document.getElementById('numBtn'),
numTween = KUTE.to(numText, {number: 1550}, {duration: 3000, easing: 'easingCubicOut'});
numBtn.addEventListener('click', function(){
if (!numTween.playing) {
if (numText.innerHTML === '1550') { numTween._vE['number'] = 0; } else { numTween._vE['number'] = 1550; }
numTween.start();
}
}, false);
// write text
var headText = document.getElementById('headText'),
headBtn = document.getElementById('headBtn'),
headTween = KUTE.to(headText, {text: "This is a <strong>super simple</strong> write text demo."}, {duration: 3000, easing: 'easingBounceOut'});
headBtn.addEventListener('click', function(){
!headTween.playing && headTween.start();
}, false);
// combo wombo
var comText = document.getElementById('comText'),
comNum = document.getElementById('comNum'),
comBtn = document.getElementById('comBtn'),
comTween11 = KUTE.to(comNum, {number: 2500}, {duration: 2000, easing: 'easingCubicOut'}),
comTween12 = KUTE.to(comText, {text: "People <strong>following</strong> on Github."}, { textChars: 'symbols', duration: 3000, easing: 'easingCubicInOut'}),
comTween21 = KUTE.to(comNum, {number: 7500}, {delay: 3000, duration: 2000, easing: 'easingCubicInOut'}),
comTween22 = KUTE.to(comText, {text: "More <em class='red'>crazy tricks</em> coming soon."}, {textChars: 'all', delay: 2000, duration: 3000, easing: 'easingCubicInOut'});
comTween11.chain(comTween21); comTween12.chain(comTween22);
comBtn.addEventListener('click', function(){
if (!comTween11.playing && !comTween21.playing && !comTween12.playing && !comTween22.playing) {
comTween11.start();
comTween12.start();
}
}, false);

2
attr.html
View file

@ -60,6 +60,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li class="active"><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -68,6 +69,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>

2
css.html
View file

@ -60,6 +60,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li class="active"><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -68,6 +69,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>

4
easing.html
View file

@ -14,7 +14,7 @@
<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>
<title>KUTE.js Easing Functions | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
@ -61,6 +61,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -69,6 +70,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li class="active"><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>

4
examples.html
View file

@ -14,7 +14,7 @@
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<title>KUTE.js Examples | Javascript Animation Engine</title>
<title>KUTE.js Core Engine Examples | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
@ -59,6 +59,7 @@
<li class="active"><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -67,6 +68,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>

5
extend.html
View file

@ -61,6 +61,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -69,6 +70,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li class="active"><a href="extend.html">Extend Guide</a></li>
</ul>
@ -86,9 +88,10 @@
<h3>Basic Plugin Template</h3>
<p>The best way to extend, no matter what you would like to achieve is to use a specific closure, here's an example:</p>
<pre><code class="language-javascript">/* KUTE.js - The Light Tweening Engine
* by dnp_theme
* package - pluginName
* desc - what your plugin does
* by yourNickname aka YOUR NAME
* pluginName by yourNickname aka YOUR NAME
* Licensed under MIT-License
*/

6
features.html
View file

@ -58,6 +58,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -66,6 +67,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
@ -123,13 +125,13 @@
<p>Unlike previous versions where animations started right away, starting with version 0.9.5 KUTE.js gives you great animation control methods such as: <code>.start()</code>, <code>.stop()</code>, <code>.pause()</code> and <code>.resume()</code>. These public methods work either when animation is not running, running or is paused. You need to see the <a href="api.html">documentation</a> to learn how these work.</p>
<h4>Tween Options</h4>
<p>Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for <code>transform</code>. For instance 3D rotations require a <code>perspective</code> or a <code>perspective-origin</code>, right?</p>
<p>Aside from the usual options such as duration, delay, easing, repeat or yoyo, it also comes with specific tween options for <code>transform</code>. For instance 3D rotations require a <code>perspective</code> or a <code>perspective-origin</code>, right? Well, make sure to <a href="options.html">check that out</a>.</p>
<h4>Callback System</h4>
<p>Another important KUTE.js feature is the solid callback system. This allows you to schedule functions to run on animation start, on each frame, on pause / resume, on stop and on complete. The functions bound at start or resume will delay the animation, while the functions running on each frame can potentially influence performance on large amounts of elements so you must use them wisely.</p>
<h4>Addons</h4>
<p>KUTE.js sports some fine tuned addons: jQuery Plugin, cubic bezier easing functions and also physics based easing functions. It also features an attributes plugin as well as a SVG plugin for various awesome stuff, but I'm open for more features in the future.</p>
<p>KUTE.js sports some fine tuned addons: jQuery Plugin, <a href="svg.html">SVG Plugin</a>, <a href="text.html">Text Plugin</a>, <a href="attr.html">Attributes Plugin</a>, <a href="css.html">CSS Plugin</a>, cubic bezier easing functions and also physics based easing functions. It also features an extensive guide on <a href="extend.html">how to extend</a>, but I'm open for more features in the future.</p>
<p>Check the <a href="api.html">documentation</a> on these methods and the <a href="examples.html">examples page</a> for more.</p>
</div>

21
index.html
View file

@ -58,6 +58,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -66,6 +67,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
@ -79,10 +81,10 @@
<div class="content-wrap">
<div class="columns welcome">
<div class="col2 table">
<div class="cell">
<h2 class="nomargin">Welcome Developers!</h2>
<p class="lead">KUTE.js is a Javascript animation engine with top performance, memory efficient &amp; modular code. It delivers a whole bunch of tools to help you create great custom animations.</p>
<p>
<div class="frontpage">
<h2 class="nomargin"></h2>
<p class="lead"></p>
<p class="btns">
<a class="btn btn-blue" href="https://github.com/thednp/kute.js/archive/master.zip">Download</a>
<a class="btn" href="https://github.com/thednp/kute.js">Github</a>
<a class="btn" href="http://www.jsdelivr.com/#!kute.js">CDN</a>
@ -122,7 +124,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>requestAnimationFrame</code>, <code>transform</code> and <code>border-radius</code>, hustle free for older Gecko/Webkit/IE browsers.</p>
<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 even use the utilities yourself, so hustle free for older Gecko/Webkit/IE browsers.</p>
</div>
</div>
<div class="columns hiddenoverflow">
@ -132,17 +134,17 @@
</div>
<div class="col2">
<h3>Powerful Methods</h3>
<p>KUTE.js allows you to <a href="features.html#methods">create tweens</a> and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum <a href="api.html#tweenoptions">tween options</a>.</p>
<p>KUTE.js allows you to <a href="features.html#methods">create tweens</a> and chainable tweens, gives you tween control methods (start/stop/pause/resume) and comes with full spectrum <a href="options.html">tween options</a>.</p>
</div>
</div>
<div class="columns hiddenoverflow">
<div class="col2">
<h3>Packed With Tools</h3>
<p>KUTE.js comes with tools to help you configure awesome animations: SVG Plugin, jQuery plugin, cubic-bezier and physics easing functions, color convertors, and you can even <a href="features.html#extensible">extend</a> it yourself.</p>
<p>KUTE.js comes with tools to help you configure awesome animations: CSS / SVG / ATTR Plugins, jQuery plugin, easing functions, color convertors, and you can even <a href="features.html#extensible">extend</a> it yourself.</p>
</div>
<div class="col2">
<h3>Plenty Of Properties</h3>
<p>KUTE.js covers all animation needs such as SVG morph and other specific CSS properties, then <code>transform</code>, <code>scroll</code>, <code>border-radius</code>, and almost the full box model and also text properties.</p>
<p>KUTE.js covers <a href="properties.html">all animation needs</a> such as SVG morph and other specific CSS properties, then <code>transform</code>, <code>scroll</code>, <code>border-radius</code>, and almost the full box model and also text properties.</p>
</div>
</div>
<div class="columns hiddenoverflow">
@ -169,7 +171,7 @@
<div class="col3">
<span class="ion-ios-paper media"></span>
<h3>Documentation</h3>
<p>The <a href="api.html">API documentation</a> is here for you to get you started.</p>
<p>The <a href="start.html">API documentation</a> is here for you to get you started.</p>
</div>
<div class="col3">
@ -208,6 +210,7 @@
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./src/kute-css.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./src/kute-text.js"></script> <!-- KUTE.js CSS Plugin -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
<script src="./assets/js/home.js"></script> <!-- some stuff -->
</body>

179
options.html Normal file
View file

@ -0,0 +1,179 @@
<!DOCTYPE html>
<!--[if IE 7]><html class="ie ie7" lang="en"><![endif]-->
<!--[if IE 8]><html class="ie ie8" lang="en"><![endif]-->
<!--[if IE 9]><html class="ie ie9" lang="en"><![endif]-->
<!--[if !IE ]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="KUTE.js tween options refference on most common options as well as property or plugin specific.">
<meta name="keywords" content="kute,kute.js,Javascript,Native Javascript,vanilla javascript,jQuery">
<meta name="author" content="dnp_theme">
<link rel="shortcut icon" href="./assets/img/favicon.png"> <!-- TO DO -->
<title>KUTE.js Tween Options | Javascript Animation Engine</title>
<!-- RESET CSS -->
<link type="text/css" href="./assets/css/reset.css" rel="stylesheet">
<!-- DEMO KUTE CSS -->
<link type="text/css" href="./assets/css/kute.css" rel="stylesheet">
<!-- Ion Icons -->
<link type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet">
<!-- Synthax highlighter -->
<link href="./assets/css/prism.css" rel="stylesheet">
<!-- Polyfill -->
<script src="./assets/js/minifill.js"> </script>
<!-- legacy browsers support via polyfill
<script src="https://cdn.polyfill.io/v2/polyfill.js?features=default,getComputedStyle|gated"> </script> -->
<!--[if IE]>
<script src="https://cdn.jsdelivr.net/minifill/0.0.2/minifill.min.js"> </script>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="fill overlay"></div>
<div class="site-wrapper">
<div class="navbar-wrapper">
<div class="content-wrap">
<a href="index.html"><h1>KUTE.<span>js</span></h1></a>
<ul class="nav">
<li class="btn-group"><a href="#" data-function="toggle">Features <span class="caret"></span></a>
<ul class="subnav">
<li><a href="features.html">Feature Overview</a></li>
<li><a href="properties.html">Supported Properties</a></li>
</ul>
</li>
<li class="btn-group">
<a href="#" data-function="toggle">Examples <span class="caret"></span></a>
<ul class="subnav">
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
<li class="btn-group active">
<a href="#" data-function="toggle">API <span class="caret"></span></a>
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li class="active"><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
</li>
<li><a href="about.html">About</a></li>
</ul>
</div>
</div>
<div class="content-wrap">
<h2 id="tweenoptions">Tween Options</h2>
<h3>Common Options</h3>
<p>These options affect all types of tweens, no matter the properties used or context.</p>
<ul>
<li><kbd>duration: 500</kbd> option allows you to set the animation duration in miliseconds. The default value is <strong>700</strong>.</li>
<li><kbd>repeat: 20</kbd> option allows you to run the animation of given tween multiple times. The default value is <strong>0</strong>.</li>
<li><kbd>delay: 500</kbd> option allows you to delay the tween animation for a certain number of miliseconds. The default value is <strong>0</strong>.</li>
<li><kbd>offset: 200</kbd> option is only for <code>.allTo()</code> and <code>.allFromTo()</code> methods. This allows you to set a base delay in miliseconds that increases with each element in the collection. This has no effect on other methods and the default value is <strong>0</strong>.</li>
<li><kbd>repeatDelay: 500</kbd> option allows you to set a number of miliseconds delay between repeatable animations. If <code>repeat</code> option is set to <strong>0</strong>, will produce no effect. The default value is <strong>0</strong>.</li>
<li><kbd>yoyo: true/false</kbd> option makes use of the internal reverse functionality to also animate from <b>end</b> to <b>start</b> for a given tween. This option requires that you use the <code>repeat</code> option with at least value <b>1</b>. The default value is <strong>false</strong>.</li>
<li><kbd>easing: 'easingCubicInOut'</kbd> option allows you to use a custom easing function for your animation. For more info on the easing functions, you need to see the example pages. The default value is <strong>linear</strong>.</li>
</ul>
<h3>Transform Options</h3>
<p>These options only affect animation involving any 3D property from CSS3 <code>transform</code> and have no effect on other CSS properties. While you can set <code>perspective</code> or <code>perspective origin</code> via CSS, these options are here to help, especially with full browser support and preffix free handling.</p>
<ul>
<li><kbd>perspective: 500</kbd> option allows you to set a 3D transformation <code>perspective</code> for a given HTML element. No default value.</li>
<li><kbd>perspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for a given HTML. This option has no default value and only accepts valid CSS values according to it's specs.</li>
<li><kbd>parentPerspective: 500</kbd> option allows you to set a 3D <code>perspective</code> for the <strong>parent</strong> of the HTML element subject to the transform animation.</li>
<li><kbd>parentPerspectiveOrigin: "50% 50%"</kbd> option allows you to set a <code>perspectiveOrigin</code> for the parent of the HTML element subject to the transform animation. Also like the above similar options, this options only accepts valid CSS values.</li>
<li><kbd>transformOrigin: "50% 50%"</kbd> option allows you to set a <code>transformOrigin</code> for the HTML element subject to the transform animation. Also this options only accepts valid CSS values.</li>
</ul>
<h3>SVG Plugin Options</h3>
<p>The following options only affect animation of the <code>path</code> tween property, to customize the SVG morph animation. See <a href="svg.html">SVG Plugin</a> page.</p>
<ul>
<li><kbd>showMorphInfo: true</kbd> when <code>true</code> the script will log information about the morph in order to help you maximize/customize the morph.</li>
<li><kbd>morphPrecision: Number</kbd> option allows you to set the sampling size of the morph. The lesser value the better visual but the more power required.</li>
<li><kbd>morphIndex: Number</kbd> option allows you to rotate the second/end path in a way that the points travel the least possible distance during morph, and as an effect the morph animation feel more "natural".</li>
<li><kbd>reverseFirstPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the FIRST shape.</li>
<li><kbd>reverseSecondPath: true</kbd> when is <code>true</code> this option allows you to reverse the draw direction of the SECOND shape.</li>
</ul>
<h3>Text Plugin Options</h3>
<p>The only option for the plugin is the <kbd>textChars</kbd> option for the <kbd class="bg-olive">text</kbd> property and allows you to set the characters set for the scrambling character during the animation. See <a href="text.html">Text Plugin</a> page for more instructions and demo.</p>
<h3>Callback Options</h3>
<p>These options also affect all types of tweens, and are bound by the tween control options and the internal update functions.</p>
<ul>
<li><kbd>start: function</kbd> option allows you to set a function to run once tween animation starts.</li>
<li><kbd>update: function</kbd> option allows you to set a function to run on every frame.</li>
<li><kbd>pause: function</kbd> option allows you to set a function to run when animation is paused.</li>
<li><kbd>resume: function</kbd> option allows you to set a function to run when animation is resumed.</li>
<li><kbd>stop: function</kbd> option allows you to set a function to run when animation is stopped.</li>
<li><kbd>complete: function</kbd> option allows you to set a function to run when animation is finished.</li>
</ul>
<p>A quick example would look like this:</p>
<pre><code class="language-javascript">//define a function
var callback = function(){
//do some foo
}
//create object and start animating already
KUTE.fromTo(div,{left:150},{left:0},{complete: callback}).start();
</code></pre>
<h3>Other</h3>
<p><kbd>keepHex: true</kbd> option allows you to always use <code>HEX</code> color format, even if you have used <code>RGB</code> or <code>RGBA</code>. This option is useful when tweening color properties on legacy browsers, however modern browsers may ignore this option for performance reasons.</p>
</div>
<div class="content-wrap">
<ul id="share" class="nav">
<li>Share </li>
<li class="hidden-xs"><a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Facebook"><span class="ion-social-facebook-outline icon"></span></a></li>
<li class="hidden-xs"><a target="_blank" href="https://twitter.com/home?status=Spread the word about @kute.js animation engine by @thednp and download here http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Twitter"><span class="icon ion-social-twitter-outline"></span></a></a></li>
<li class="hidden-xs"><a target="_blank" href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html" title="Share KUTE.js on Google+"><span class="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<div class="content-wrap">
<p class="pull-right"><a id="toTop" href="#">Back to top</a></p>
<p>&copy; 2007 - 2016 &middot; <a href="http://themeforest.net/user/dnp_theme?ref=dnp_theme">dnp_theme</a>.</p>
</div>
</footer>
</div><!-- /.site-wrapper -->
<!-- JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<!-- highlighter -->
<script src="./assets/js/prism.js" type="text/javascript"></script>
<!--<script src="http://cdn.jsdelivr.net/kute.js/1.0.0/kute.full.min.js"></script> KUTE CDN -->
<script src="./src/kute.js"></script> <!-- KUTE.js core -->
<script src="./assets/js/scripts.js"></script> <!-- some stuff -->
</body>
</html>

13
properties.html
View file

@ -57,6 +57,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -65,6 +66,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>
@ -160,7 +162,7 @@
<p>The <a href="attr.html">Attributes Plugin</a> can animate any numerical presentation attribute such as <kbd class="bg-olive">width</kbd>, <kbd class="bg-olive">cx</kbd> or <kbd class="bg-olive">stop-opacity</kbd>, but the values can be also suffixed: <code>150px</code> or <code>50%</code>, and for that you must always provide a string value that include the measurement unit, and that, of course, depends on the attribute. This plugin can be a great addition to the above SVG Plugin for specific gradient attributes or specific geometric shapes' attributes.</p>
<p>The synthax is slightly different to make sure we don't mess up with CSS properties that have the same name because the presentation attribute may be a unitless attribute while the CSS property might require a suffix (%,px,etc). For instance <code>KUTE.to('selector', {attr:{width:150}})</code> is clearly different from <code>KUTE.to('selector', {width:150})</code> which is the the CSS property with the same name.</p>
<h3>Text Properties</h3>
<h3>Typography Properties</h3>
<p>The <a href="css.html">CSS Plugin</a> also cover the text properties, and these can be combinated with each other when applied to text elements (paragraphs, headings) as animation fallback for <code>scale</code> on browsers that don't support <code>transform</code> at all. Yes, IE8 and other legacy browsers.</p>
<ul>
<li><kbd class="bg-olive">fontSize</kbd> allows you to animate the <code>font-size</code> for a given element.</li>
@ -173,7 +175,14 @@
<h3>Scroll Animation</h3>
<p>KUTE.js core engine currently supports only vertical <kbd class="bg-blue">scroll</kbd> for both the window and a given element that's scrollable (when <code>scrollHeight</code> is higher than <code>offsetHeight</code>). Both <code>scroll: 150</code> or <code>scrollTop: 150</code> notations will do. When animating scroll, KUTE.js will disable all scroll and swipe handlers to prevent animation bubbles as well as scroll bottlenecks.</p>
<h3>Other properties</h3>
<h3>String Properties</h3>
<ul>
<li><kbd class="bg-olive">number</kbd> allows you to tween a number either from 0 or from a current value and updates the <code>innerHTML</code> for a given target. Eg. <code>number:1500</code></li>
<li><kbd class="bg-olive">text</kbd> allows you to write a string one character at a time followed by a scrambling character. Eg. <code>text: 'A demo with &lt;b>substring&lt;/b>'</code>. </li>
</ul>
<p>See <a href="text.html">Text Plugin</a> for details.</p>
<h3>Other Properties</h3>
<ul>
<li><kbd class="bg-olive">clip</kbd> allows you to animate the <code>clip</code> property for a given element. Only rect is supported. Eg. <code>clip:[250,200,300,0]</code>. See <a href="http://www.w3.org/TR/CSS2/visufx.html#propdef-clip" target="_blank">spec</a> for details.</li>
<li><kbd class="bg-olive">backgroundPosition</kbd> allows you to animate the <code>background-position</code> for a given element that uses a background image. It only uses % as measurement unit. Eg. <code>backgroundPosition:[50,20]</code></li>

10
src/kute-css.js
View file

@ -17,8 +17,8 @@
}
})(function(KUTE){
var K = window.KUTE, p,
_br = K.property('borderRadius'), _brtl = K.property('borderTopLeftRadius'), _brtr = K.property('borderTopRightRadius'),
_brbl = K.property('borderBottomLeftRadius'), _brbr = K.property('borderBottomRightRadius'), // all radius props prefixed
_br = K.property('borderRadius'), _brtl = K.property('borderTopLeftRadius'), _brtr = K.property('borderTopRightRadius'), // all radius props prefixed
_brbl = K.property('borderBottomLeftRadius'), _brbr = K.property('borderBottomRightRadius'),
_cls = ['borderColor', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'outlineColor'], // colors 'hex', 'rgb', 'rgba' -- #fff / rgb(0,0,0) / rgba(0,0,0,0)
_rd = ['borderRadius', 'borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius'], // border radius px/any
_bm = ['right', 'bottom', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight',
@ -45,7 +45,7 @@
}
}
// create prepare/render functions for additional colors properties
// create prepare/process/render functions for additional colors properties
for (var i = 0, l = _cls.length; i<l; i++) {
p = _cls[i];
K.pp[p] = function(p,v) {
@ -74,7 +74,7 @@
};
}
// create prepare/render functions for additional box model properties
// create prepare/process/render functions for additional box model properties
for (var i = 0, l = _mg.length; i<l; i++) {
p = _mg[i];
K.pp[p] = function(p,v){
@ -90,7 +90,7 @@
};
}
//create prepare/render functions for radius properties
//create prepare/process/render functions for radius properties
for (var i = 0, l = _rd.length; i<l; i++) {
p = _rd[i];
K.pp[p] = function(p,v){

61
src/kute-text.js Normal file
View file

@ -0,0 +1,61 @@
/* KUTE.js - The Light Tweening Engine
* package - KUTE.js Text Plugin
* desc - adds the tween numbers incremental and cool string writing/scrambling
* by dnp_theme & @dalisoft
* Licensed under MIT-License
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
define(["./kute.js"], function(KUTE){ factory(KUTE); return KUTE; });
} else if(typeof module == "object" && typeof require == "function") {
var KUTE = require("./kute.js");
module.exports = factory(KUTE);
} else if ( typeof window.KUTE !== 'undefined' ) {
factory();
} else {
throw new Error("Text-Plugin requires KUTE.js.");
}
}( function () {
var K = window.KUTE,
_s = String("abcdefghijklmnopqrstuvwxyz").split(""), // lowercase
_S = String("abcdefghijklmnopqrstuvwxyz".toUpperCase()).split(""), // uppercase
_sb = String("~!@#$%^&*()_+{}[];'<>,./?\=-").split(""), // symbols
_n = String("0123456789").split(""), // numeric
_a = _s.concat(_S,_n), // alpha numeric
_all = _a.concat(_sb), // all caracters
_r = Math.random, _f = Math.floor, _m = Math.min;
K.prS['text'] = K.prS['number'] = function(l,p,v){
return l.innerHTML;
}
K.pp['text'] = function(p,v,l) {
if ( !( 'text' in K.dom ) ) {
K.dom['text'] = function(w,p,v) {
var tp = tp || w.textChars === 'alpha' ? _s // textChars is alpha
: w.textChars === 'upper' ? _S // textChars is numeric
: w.textChars === 'numeric' ? _n // textChars is numeric
: w.textChars === 'alphanumeric' ? _a // textChars is alphanumeric
: w.textChars === 'symbols' ? _sb // textChars is symbols
: w.textChars ? w.textChars.split('') // textChars is a custom text
: _s, l = tp.length, s = w._vE[p],
t = tp[_f((_r() * l))], tx = '', f = s.substring(0);
tx = f.substring(0,_f(_m(v * f.length, f.length)));
w._el.innerHTML = v < 1 ? tx+t : tx;
}
}
return v;
}
K.pp['number'] = function(p,v,l) {
if ( !( 'number' in K.dom ) ) {
K.dom['number'] = function(w,p,v) {
w._el.innerHTML = parseInt(w._vS[p] + (w._vE[p] - w._vS[p]) * v);
}
}
return parseInt(v) || 0;
}
return this;
}));

2
start.html
View file

@ -61,6 +61,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -69,6 +70,7 @@
<ul class="subnav">
<li class="active"><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>

2
svg.html
View file

@ -59,6 +59,7 @@
<li><a href="examples.html">Core Engine</a></li>
<li><a href="css.html">CSS Plugin </a></li>
<li class="active"><a href="svg.html">SVG Plugin </a></li>
<li><a href="text.html">Text Plugin </a></li>
<li><a href="attr.html">Attributes Plugin </a></li>
</ul>
</li>
@ -67,6 +68,7 @@
<ul class="subnav">
<li><a href="start.html">Getting Started</a></li>
<li><a href="api.html">Public Methods</a></li>
<li><a href="options.html">Tween Options</a></li>
<li><a href="easing.html">Easing Functions</a></li>
<li><a href="extend.html">Extend Guide</a></li>
</ul>

170
text.html Normal file
View file

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