Transform Origin

The transform origin defines the point in 3D space in which transforms, such as rotation, are relative to. This example demonstrates rotation around the x and y axes.

Configuration

The story uses two text items. To avoid duplication, a class named text is configured with common property values. The class is associated with the text items in their init entries.

By default, items are positioned in the center of the page at [0,0,0], and each item has a transform origin in it’s center at [0,0,0]. The items are pulled forward on the z axis 40 percent. Since the origin is relative to the item, not the page, the origin moves with it. The story sets the transform origin of each item to -40 percent on the z axis. This, in essence, counters the item’s positional movement and puts them back to where they were initially from a global point of view.

The frame is configured with an aspect ratio of 1 to show how the items move relative to a square space.

Animation

The X text item starts with an x rotation value of 0, the default, and animates to 360. Since 0 and 360 look the same, and a linear ease is used, the animation restarts without any jarring.

The Y text item works the same, except it animates the y rotation and is initialized at 180 degrees and goes to -180. The different angles are used so to make the text items diametrically opposed.

Adding the Z Axis

The second story animation, which can be seen by clicking the button labeled 2 underneath the editor, adds another text item that rotates around the Z axis. It adjusts it’s origin along the X axis, so it needs to set the expand value and compensate for the item’s dimensions.

story = {
  classes: { 
    text: { pos:{z:40}, origin:{z:-40}, font:40 }
  },
  frame: { aspectRatio:1 },
  items: [
    { text:"X",
      init: {
        class:"text",
        color:"rgba(0,127,127,0.8)"
      },
      action: {anim:[5,"linear"], rot:{x:360}}
    },
    { text:"Y",
      init: {
        class:"text", 
        color:"rgba(127,0,0,0.8)",
        rot:{y:-180}
      },
      action: {anim:[5,"linear"], rot:{y:180}}
    }
  ]
};
story = {
  classes: { 
    z: { pos:{z:40}, origin:{z:-40}, font:40 }
  },
  frame: { aspectRatio:1 },
  items: [
    { text:"X",
      init: {
        class:"z",
        color:"rgba(127,0,0,0.8)"
      },
      action: {anim:[5,"linear"], rot:{x:360}}
    },
    { text:"Y",
      init: {
        class:"z", 
        color:"rgba(0,127,0,0.8)",
        rot:{y:-120}
      },
      action: {anim:[5,"linear"], rot:{y:240}}
    },
    { text:"Z",
      init: {
        pos: {x:-26}, font:40,
        origin:{x:40, y:20, expand:true},
        color:"rgba(0,0,127,0.8)",
        rot:-240
      },
      action: {anim:[5,"linear"], rot:120}
    }
  ]
};