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.
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.