Text Properties

The component that animates the typographic CSS properties of a target content Element on most browsers.

Overview

Animate the text size or spacing properties of a target text element.

The KUTE.js Text Properties component enables animation for typography related CSS properties of content element targets on most browsers.

This small and simple component can be used to create various attention seekers for any content elements such as HTMLHeadingElement, HTMLParagraphElement, HTMLUListElement or any other, as well as for entire content blocks.

You can either animate an entire string or content block or split your string into words or letters and create a simple animation with one or more of the following properties:

Supported Properties

fontSize allows you to animate the font-size for a target element.
lineHeight allows you to animate the line-height for a target element.
letterSpacing allows you to animate the letter-spacing for a target element.
wordSpacing allows you to animate the word-spacing for a target element.

Example

let tween1 = KUTE.to('selector1',{fontSize:'200%'})
let tween2 = KUTE.to('selector1',{lineHeight:24})
let tween3 = KUTE.to('selector1',{letterSpacing:50})
let tween3 = KUTE.to('selector1',{wordSpacing:50})

Howdy!

Start

Notes

Be sure to check the textProperties.js for a more in-depth review of the above example.
Similar to box model properties, the text properties are also layout modifiers, they will push the layout around forcing unwanted re-paint work. To avoid re-paint, you can use a fixed height for the target element's container, as we used in our example here, or set your text to position:absolute.
The component is only included in the demo/src/kute-extra.js file.