<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
<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>
<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>
<divclass="featurettes">
<pclass="text-example"id="headText">Click the Start button on the right.</p>
<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>
<divclass="featurettes">
<divclass="columns">
<divclass="col2"style="width: 80px">
<pclass="text-example"id="comNum">0</p>
</div>
<divclass="col2"style="text-align: left">
<pclass="text-example"id="comText">Clicks so far?</p>
<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>
<liclass="hidden-xs"><atarget="_blank"href="https://www.facebook.com/sharer/sharer.php?u=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Facebook"><spanclass="ion-social-facebook-outline icon"></span></a></li>
<liclass="hidden-xs"><atarget="_blank"href="https://twitter.com/home?status=Spread the word about %23KUTEJS animation engine by @dnp_theme and download here http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Twitter"><spanclass="icon ion-social-twitter-outline"></span></a></li>
<liclass="hidden-xs"><atarget="_blank"href="https://plus.google.com/share?url=http://thednp.github.io/kute.js/index.html"title="Share KUTE.js on Google+"><spanclass="icon ion-social-googleplus-outline"></span></a></li>
</ul>
</div>
<!-- FOOTER -->
<footer>
<divclass="content-wrap">
<pclass="pull-right"><aid="toTop"href="#">Back to top</a></p>