Text Plugin

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.

Number Incrementing/Decreasing

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.

Writing Text

This feature come with a additional tween option called textChars for the scrambling text character:

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.

Combining Both


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!