Color Cycling

This example initializes the text color property of a text item and then cycles through different colors. It uses a single script with four actions. The actions execute in order, each animating the text to a new color over 2 seconds. Different color string formats are used for demonstration purposes.

Color Wheel

The second story can be viewed by clicking the button labeled 2 under the editor. It cycles through the hue colors keeping the saturation and lightness constant.

story = {
  item: {
    text: "COLOR",
    init: {color:"red", font:40, style:"bold"},
    actions:[
      {anim:2, color:"#bada55"},
      {anim:2, color:"rgba(127,0,127,0.8)"},
      {anim:2, color:"hsla(224,65%,45%,0.8)"},
      {anim:2, color:"red"}
    ]
  }
};
story = {
  classes: { 
    a:{ anim:{dur:0.5, ease:"linear"} }
  },
  item: {
    text: "COLOR",
    init: {
      font:40, style:"bold",
      color:"hsl(0,50%,50%)"
    },
    actions:[
      {class:"a", color:"hsl(16,50%,50%)"},
      {class:"a", color:"hsl(32,50%,50%)"},
      {class:"a", color:"hsl(48,50%,50%)"},
      {class:"a", color:"hsl(64,50%,50%)"},
      {class:"a", color:"hsl(80,50%,50%)"},
      {class:"a", color:"hsl(96,50%,50%)"},
      {class:"a", color:"hsl(112,50%,50%)"},
      {class:"a", color:"hsl(128,50%,50%)"},
      {class:"a", color:"hsl(144,50%,50%)"},
      {class:"a", color:"hsl(160,50%,50%)"},
      {class:"a", color:"hsl(176,50%,50%)"},
      {class:"a", color:"hsl(192,50%,50%)"},
      {class:"a", color:"hsl(208,50%,50%)"},
      {class:"a", color:"hsl(224,50%,50%)"},
      {class:"a", color:"hsl(240,50%,50%)"},
      {class:"a", color:"hsl(0,50%,50%)"}
    ]
  }
};