Pro Animation

This animation configures the canvas with a background color and rounded corners. A single text item is animated back and forth.

This animation demonstrates the use of shortcuts.

Configuration

An item entry is all that is needed since there is only one item, on one page, with the default page flow (simple). Since "text" is the default item type, the itemType entry is omitted.

An init entry is used to initialize properties. The font size is set to 35% of the height of the canvas, the text color is set to "white" and the center of the text is positioned on the x axis at the center of the canvas minus 25% of the canvas’ width.

Animation

There is only one script, which contains two actions. Therefore, the scripts entry is omitted and just actions is used instead. The array contains the actions. Each action animates the position over two seconds.

Click the buttons under the editor to view similar stories that animate other properties.

story = {
  canvas: {
    init: {bg:"#567", corners:true}
  },
  item: {
    text: "PRO",
    init: {
      font:35, color:"white",
      pos:-25
    },
    actions: [
      {anim:2, pos:25},
      {anim:2, pos:-25}
    ]
  }
};
story = {
  canvas: {
    init: {bg:"#567", corners:true}
  },
  item: {
    text: "PRO",
    init: {
      font:35, color:"white",
      pos:-25, skew:-25
    },
    actions: [
      {anim:2, pos:25, skew:25},
      {anim:2, pos:-25, skew:-25}
    ]
  }
};
story = {
  canvas: {
    init: {bg:"#567", corners:true}
  },
  item: {
    text: "PRO",
    init: {
      font:35, color:"white",
      pos:-25, skew:-25, rot:-25
    },
    actions: [
      {anim:2, pos:25, skew:25, rot:25},
      {anim:2, pos:-25, skew:-25, rot:-25}
    ]
  }
};