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();

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