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.
// 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 <span>substring</span> should do.'});
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.
In the first example, let's animate a number, approximatelly as written above:
Total number of lines: 0
The button action will toggle the valuesEnd value for the number property, because tweening a number to itself would produce no effect.
This feature come with a additional tween option called textChars for the scrambling text character:
alpha use lowercase alphabetical characters, the default valueupper use UPPERCASE alphabetical charactersnumeric use numerical characterssymbols use symbols such as #, $, %, etc.all use all alpha numeric and symbols.YOUR CUSTOM STRING use your own custom characters; eg: 'KUTE.JS IS #AWESOME'.Click the Start button on the right.
Keep in mind that the yoyo feature will NOT un-write / delete character by character the string, but will write the previous text instead.
0
Clicks so far?
In this example we've used the textChars option with symbols and all values respectively, but combining the two text properties and some other KUTE.js
features can really spice up some content. Have fun!