## Shadow Properties

The component that animates shadow properties of a specific target element on most browsers.

### Overview

Animate the shadow properties of a target element.

The KUTE.js Shadow Properties component enables animation for the text-shadow CSS property of text elements as well as the box-shadow property of any element on most browsers.

The functionality was developed while writing a guide on how to extend KUTE.js a couple of years ago and is now a fully featured component.

The component uses px as unit for the shadow parameters, can animate the color of the shadow and can also handle the inset shadow parameter of the boxShadow property.

OK let's have a look at a couple of quick examples:

### Box Shadow

    // tween to a string value
    var myBSTween1 = KUTE.to('selector', {boxShadow: '10px 10px #069'}).start();

    // or a fromTo with string and array, hex and rgb
    var myBSTween2 = KUTE.fromTo(
      'selector',                         // target
      {boxShadow: [0, 0, 0, '#069']},     // from
      {boxShadow: '5px 5px rgb(0,0,0)'})  // to
      .start();

    // maybe you want to animate an inset boxShadow?
    var myBSTween3 = KUTE.fromTo(
      'selector',                                // target
      {boxShadow: [5, 5, 0, '#069', 'inset']},   // from
      {boxShadow: '0px 0px rgb(0,0,0)'})         // to
      .start();

Start

### Text Shadow

    // tween to a string value
    var myTSTween1 = KUTE.to('selector', {textShadow: '10px 10px #069'}).start();

    // or a fromTo with string and array, hex and rgb
    var myTSTween2 = KUTE.fromTo(
      'selector',                          // target
      {textShadow: [0, 0, 0, '#069']},     // from
      {textShadow: '5px 5px rgb(0,0,0)'})  // to
      .start();

Sample Text
Start

### Notes

- The component will NOT handle multiple shadows per target at the same time.
- The component features a solid value processing script, it can handle a great deal of combinations of input values.
- I highly recommend that you check the boxShadow.js for more insight.
- This component is bundled with the demo/src/kute-extra.js file.