3D Text Animation
These three stories show similar 3-dimensional animations, each adding a little more complexity and visual impact than the prior one.
Rotating on Each Axis
The first story rotates the text over 10 seconds, to
x, y, and z rotations of 540, 540, and -540 degrees respectively. When those angles are combined, the result looks the same as [0,0,0] so the animation will not be jarring when the animation is looped.
Try changing the duration and angles.
One Script per Axis
The second story can be viewed by clicking the button labeled 2 under the editor. It rotates the text to the same angles. However, it does so using three separate scripts, which execute simultaneously. This allows each to be animated slightly differently, with varying durations and delays. The
yaxis uses a "bounce" ease for a nice effect.Rotate a Layer
The third story applies the same rotation to a layer, instead. The layer is configured with a semi-transparent yellow color. The layer has two text items that are positioned on the
z axis, relative to the layer. Since the text items are on the layer, they move with the layer as it rotates.
The text items are initialized with a class so the common property values don’t need to be repeated.
