Opacity

This example demonstrates how to animate the opacity of an item. Two text items are added with the text UNDER and OVER. The second one has it’s opacity animated back-and-forth between 100% and 0%. When the text is not fully opaque, the first text can be seen through it.

Setting the opacity to false removes the setting, which is essentially the same as setting it to 100%, the default value.

story = {
  items:[
    {
      text:"UNDER",
      init: {color:"#678",style:"bold",font:45}
    },
    {
      text:"OVER",
      init: {color:"orange",style:"bold",font:55},
      actions:[
        {delay:1, anim:2, opacity:0},
        {anim:2, opacity:false}
      ]
    }
  ]
};