Text Shadow Dancing

Text shadows are applied with the textShadow property. The three stories animate each character for half a second, repeated 3 times. So each letter pops up and down twice over a total of two seconds.

Try changing the repeat value to 1, 5 or 7 and see the effect.

The characters are staggered so that each starts half a second after the prior one, so every other character is synchronized.

A sine wave ease is used to for smooth movement.

Try changing the ease to circle and see the effect.

Adding Color

The second story initialized the default empty shadow with a purple shadow which has a one percent blur but no x and y offset. This appears as a thin purple outline around the text. The shadow is then animated to a larger green shadow.

Animate Multiple Shadows

The third story shows how to animate multiple shadows. The textShadow property supports as many shadows as you want.

story = {
  item:{
    text:"TEXT",
    init: {
      color:"#FFF",
      font:60
    },
    charAction: {
      anim:[0.5,"sine inout",[3,'yoyo'],0.5],
      textShadow:[0,4,8],
      pos:{z:5}
    }
  }
};
story = {
  item:{
    text:"TEXT",
    init: {
      color:"#FFF",
      font:60,
      textShadow:[0,0,1,"purple"]
    },
    charAction: {
      anim:[0.5,"sine inout",[3,'yoyo'],0.5],
      textShadow:[0,4,8,"green"],
      pos:{z:5}
    }
  }
};
story = {
  item:{
    text:"TEXT",
    init: {
      color:"#FFF",
      font:60,
      textShadow:[
        [0,0,1,"black"],
        [0,0,1,"black"],
        [0,0,1,"black"]
      ]
    },
    charAction: {
      anim:[0.5,"sine inout",[3,'yoyo'],0.5],
      textShadow:[
        [0.5,0.5,0.5,"black"],
        [0,-2,10,"cyan"],
        [0,2,10,"navy"]
      ],
      scale:105
    }
  }
};