## 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.