Image Item

This example adds a single image item and then scripts it with an elastic bounce.

Both the width and height are set to 70 percent which overrides the image’s default aspect ratio. The focal point of the stretches is defined by setting the transformOrigin to the bottom, center of the image.

Animation

The animation is performed with three scripts, which all execute at the same time. The first script performs two actions. It scales the image up to 140 percent, and nudges the position down a bit. The position is moved to compensate for the extra whitespace in the image. The second action simply returns the position.

The second and third scripts have a single action each. They both delay the same amount of time as the scaling action in the first script. They then take over the scaling and bring it back to 100%.

Two scripts are used so that the dimensions can be animated with different eases.

story = {
  frame: { aspectRatio: 1 },
  item: {
    itemType: "image",
    src: "html5.png",
    height: 70, width: 70,
    init: { origin:[0,50], pos:[0,10] },
    scripts: [
      { actions: [
          { anim:0.5, pos:[0,13], scale:140 },
          { anim:0.5, pos:[0,10] }
        ]
      },
      { action: {
          delay:0.5,
          anim:[3,"more elastic"],
          scale:{x:100}}
      },
      { action: {
          delay:0.5,
          anim:[3,"extra elastic"],
          scale:{y:100}}
      }
    ]
  }
};
story = {
  item: {
    itemType: "image",
    src: "html5.png",
    height: 100, width: 70,
    init: { origin:[0,50], rot:[45], pos:[0,-5,-10] },
    actions: [
      {
        anim:[1,"less curve inout"],
        rot:{y:-75}
      },
      {
        anim:[8,"elastic"],
        rot:{y:360}
      }
    ]
  }
};