Item Alignment

The anchor property defines the point on an item that will be directly over the item’s position. To align multiple items on, say, their left edge, just set their anchor’s x value to -50. If they all have matching position x values they will all line up. The anchor property can be animated as this demonstration shows.

This demonstration also shows how classes can be used to avoid a lot of duplicate code.

Vertical

The second story can be viewed by clicking the button labeled 2 under the editor. It is very similar to the first except it animates in the y direction.

story = {
  classes: { 
    layer: {border: [3,"#234"], corners: true},
    l: { anim:2, anchor:[-50,0], pos:-35 },
    r: { anim:3, anchor:[50,0], pos:35 },
    c: { anim:2, anchor:false, pos:0 }
  },
  items:  [
    {
      itemType: "layer",
      init: {size: [20,20], pos:[0,-30]},
      actions: [{class:"l"}, {class:"r"},{class:"c"}]
    },
    {
      itemType: "layer",
      init: {size: [30,20]},
      actions: [{class:"l"}, {class:"r"},{class:"c"}]
    },
    {
      itemType: "layer",
      init: {size: [40,20], pos:[0,30]},
      actions: [{class:"l"}, {class:"r"},{class:"c"}]
    }
  ]
};
story = {
  classes: { 
    layer: {border: [3,"#234"], corners: true},
    l: { anim:1, anchor:[0,-50], pos:{y:-45} },
    r: { anim:2, anchor:[0,50], pos:{y:45} },
    c: { anim:1, anchor:false, pos:{y:0} }
  },
  items:  [
    {
      itemType: "layer",
      init: {size: [15,30], pos:-20},
      actions: [{class:"l"}, {class:"r"},{class:"c"}]
    },
    {
      itemType: "layer",
      init: {size: [15,40]},
      actions: [{class:"l"}, {class:"r"},{class:"c"}]
    },
    {
      itemType: "layer",
      init: {size: [15,50], pos:20},
      actions: [{class:"l"}, {class:"r"},{class:"c"}]
    }
  ]
};