3D Rotation

The rotation property supports rotation in three dimensions. The first story defines three text items that will each rotate around one of the dimensions.

A default class is used to define properties common to all text items. The transform origin property bumps the origin down 7 percent to compensate for the vertical centering of the font glyphs. Each text item animates for 3 seconds, each waiting for the prior one by use of the delay property.

Perspective

The vanishing point is in the center of the page. To demonstrate perspective with 3D animation, the second story moves the X and Y text items around in a circular pattern. The second story can be seen by clicking the button labeled 2 underneath the editor.

The text items are placed in nested layers. The first rotates with a rotation radius of 20 percent of the page’s width. The outer layer has a single inner layer that is simply rotating in the opposite direction. The text items are children of the inner layer. The layers rotate three times, ten seconds each. The text items rotate ten times, three seconds each. All use a linear ease for seamless, constant rotation.

story = {
  classes: { 
    text:{
      color:"rgba(22,33,44,0.5)",
      origin:{y:7},
      font:40
    }
  },
  frame: { aspectRatio:1.5},
  items: [
    {
      text:"x axis",
      action:{anim:3, rot:{x:360}}
    },
    {
      text:"y axis",
      action:{delay:3,anim:3, rot:{y:360}}
    },
    {
      text:"z axis",
      action:{delay:6,anim:3, rot:360}
    }
  ]
};
story = {
  classes: { 
    text:{
      color:"rgba(22,33,44,0.5)",
      origin:{y:7},
      font:20
    }
  },
  frame: { aspectRatio:1.5},
  item: {
    itemType:"layer",
    init:{ origin:{x:-20,expand:true}, pos:20 },
    action:{ anim:[10,"linear",2], rot:360 },
    item: {
      itemType:"layer",
      action:{ anim:[10,"linear",2], rot:-360 },
      items: [
        {
          text:"x axis",
          init:{origin:{y:5}},
          action:{anim:[3,"linear",9], rot:{x:360}}
        },
        {
          text:"y axis",
          action:{anim:[3,"linear",9], rot:{y:360}}
        }
      ]
    }
  }
};