Text Shadow

This example initializes a text item as 60 percent the height of the frame, with a dark blue color and a shadow. The shadow is not offset from the text, but does have a 3 percent blur.

Animation

A repeating action is added that animates for four seconds, two seconds up and two seconds down. The text is moved up the z axis, coming closer to you. The shadow is moved down and to the right 5 percent and the blur is increased to 10 percent. The color is also changed to a semi-transparent black.

Try changing the destination shadow to "rgba(0,255,0,0.5)", which is semi-transparent green.

Text Outline

The second story can be viewed by clicking the button labeled 2 under the editor. It demonstrates use of a second shadow. The text shadow property supports any number of shadows. In this example, we insert a simple white shadow, with no offset, and only a 1 percent blur. This forms a light outline around the text.

To ensure a smooth animation, the destination shadow property has the same number of shadows as the initialized one. The simple outline shadow is the same in both.

Because the white outline is formed by a blur, it is a bit faint. It can be made bolder, though.

Bolder Text Outline

The third story uses the same outline-shadow approach but repeats the shadow multiple times. This technique can be used to make bolder outlines.

story = {
  item:{
    text:"S",
    init: {
      color:"#246",
      font:60,
      textShadow:[0,0,3,"black"]
    },
    action: {
      anim:{dur:2, rep:[1,'yoyo']},
      pos:[0,0,20],
      textShadow:[5,5,10,"rgba(0,0,0,0.7)"]
    }
  }
};
story = {
  item:{
    text:"S",
    init: {
      color:"#246",
      font:60,
      textShadow:[
        [0,0,1,"white"],
        [0,0,3,"black"]
      ]
    },
    action: {
      anim:{dur:2, rep:[1,'yoyo']},
      pos:[0,0,20],
      textShadow:[
        [0,0,1,"white"],
        [5,5,10,"rgba(0,0,0,0.7)"]
      ]
    }
  }
};
story = {
  item:{
    text:"S",
    init: {
      color:"#246",
      font:60,
      textShadow:[
        [0,0,1,"#FFF"], [0,0,1,"#FFF"],
        [0,0,1,"#FFF"], [0,0,1,"#FFF"],
        [0,0,3,"rgb(0,0,0)"]
      ]
    },
    action: {
      anim:{dur:2, rep:[1,'yoyo']},
      pos:[0,0,20],
      textShadow:[
        [0,0,1,"#FFF"], [0,0,1,"#FFF"],
        [0,0,1,"#FFF"], [0,0,1,"#FFF"],
        [5,5,10,"rgba(0,0,0,0.7)"]
      ]
    }
  }
};