Hello World in 3D

Two text items are scripted to animate independently but finish at the same time so that the story can be looped.

Animation

The word Hello looks complicated because it spins around in three dimensions. However, it is actually a straight-forward animation of the rotation property. The y value of -360 and z value of 540 make all the difference. Try changing those numbers and see what happens. Since the second action rotates to [180,180,180], which looks the same as the initialized value of [0,0,0], there isn’t any jarring when the animation restarts.

The word World is a bit more complicated because it is composed of three separate scripts. The first two animate the x and y position values independently, simultaneously, over the same duration, but with different easing. This creates a curved movement.

The third script sequences two movements, one after the the other, after waiting 3 seconds, which moves the text to the top-right and then back to the starting point in the bottom-right.

story = {
	canvas: {
		padding:15,
		init: {bg: "#BADA55"}
	},
	items: [
		{
			text: "Hello",
			init: {font:50, opacity:50},
			actions: [
				{anim:5, rot:[180, -360, 540]},
				{anim:5, rot:[180, 180, 180]}
			]
		},
		{
			text: "World",
			init: {font:20, pos:[35, 35], opacity:50},
			scripts: [
				{  action:{anim:[3,"curve less out"], pos:{x:-35}}},
				{  action:{anim:[3,"curve less in"], pos:{y:-35}}},
				{
					actions: [
						{delay:3, anim:[3,"elastic"], pos:[35,-35]},
						{anim:[3,"bounce"], pos:[35,35]}
					]
				}
			]
		}
	]
};