Spinning Letters

The init entry is used to initialized properties that apply to all of the text. The font is sized to 40 percent of the frame’s height. The text is colored and bolded.

The animation is applied at the character level, using charAction, as opposed to being at the text level using action. Each letter is rotated on all three axes over 4 seconds, repeated 10 times. Each letter starts animating 1.25 seconds after the prior one starts.

Try adding a drop shadow to the text using the textShadow property.

init: {
  font: 40,
  style: "bold",
  pos:{z:10},
  color:"#33F",
  textShadow: 4
}

It probably doesn’t look as you expected. The shadow is rendered as part of the bitmap, before the rotation. So it rotates around with the text. Read about compositing for more information.

Luckily, it’s fairly easy to fix this.

Adding a Shadow

The second story can be viewed by clicking the button labeled 2 under the editor. This story creates a second text item to act as the shadow. It has the same size and style, and animates the same way. The shadow text is made transparent, but with a shadow. This way, all you see is the shadow.

Unfortunately, this technique for rendering a shadow doesn't work in either Microsoft Internet Explorer or Microsoft Edge due to a bug that renders text shadows at the same opacity as the fore color. Hopefully they'll fix it. In the interim, use *any* other browser.

Make the Story Shorter

Because we have two similar text items, there’s a lot of duplication. We can remove the duplication by putting those values in classes.

The third story is exactly the same as the second, but uses classes. The common text property initialization is put in a text class. All text items use this in their initialization by default. The animation is put into a rotate class and both text items use it in their charAction entry.

story = {
  item: {
    text: "CHARS",
    init: {
      font: 40,
      style: "bold",
      pos: {z:10},
      color: "#33F"
    },
    charAction: {
      anim: [4,"less curve",10,1.25],
      rot: [180,540,-540]
    }
  }
};
story = {
  items: [
    {
      text: "CHARS",
      init: { 
        font: 40,
        style: "bold",
        pos: {z:10},
        color: "#33F"
      },
      charAction: {
        anim: [4,"less curve",10,1.25],
        rot: [180,540,-540]
      }
    },
    {
      text: "CHARS",
      init: {
        font: 40,
        style: "bold",
        textShadow: [0,0,10],
        color: "transparent",
        pos: {y:7}
      },
      charAction: {
        anim: [4,"less curve",10,1.25],
        rot: [180,540,-540]
      }
    }
  ]
};
story = {
  classes: {
    text: { font:40, style:"bold" },
    rotate: {
      anim: [4,"less curve",10,1.25],
      rot: [180,540,-540] 
    }
  },
  items: [
    {
      text: "CHARS",
      init: { pos:{z:10}, color:"#33F" },
      charAction: { class:"rotate" }
    },
    {
      text: "CHARS",
      init: {
        textShadow:[0,0,10],
        color:"transparent",
        pos:{y:7}
      },
      charAction: { class:"rotate" }
    }
  ]
};