Property Animation

This story demonstrates the effect of many different property animations and how multiple text items can be scripted in parallel.


Most of the animation scripts look generally the same. The position value animations sequence two actions each, back and forth. Therefore, those items use an actions entry. The other only have one action so an action entry is all that is needed. Using the simplest entry as needed is called shortcutting.

The rotation animations are designed to be continuously smooth. To avoid any jarring when the animation restarts, a linear ease is used.

story = {
	canvas: {
	page: {
		init: { color: "#8C001A" },
		items: [
			{ text: "opacity",
				init: {font:15, opacity:100, pos:[30, -45]},
				actions: [{anim:3, opacity:0}, {anim:3, opacity:100}]
			{ text: "X",
				init: {font:15},
				actions: [{anim:3, pos:{x:-30}}, {anim:3, pos:{x:0}}]
			{ text: "Y",
				init: {font:15},
				actions: [{anim:3, pos:{y:-40}}, {anim:3, pos:{y:0}}]
			{ text: "Z",
				init: {font:15},
				actions: [{anim:3, pos:{z:50}}, {anim:3, pos:{z:0}}]
			{ text: "scale",
				init: {font:30, position:[-25, -45], scale:100},
				actions: [{anim:3, scale:0}, {anim:3, scale:100}]
			{ text: "skew",
				init: {font:15, pos:[-35, 25], skew:30},
				actions: [{anim:3, skew:-30}, {anim:3, skew:30}]
			{ text: "rotation x",
				init: {font:10, pos:[-5, 47]},
				action: {anim:{dur:6, ease:"linear"}, rot:{x:720}}
			{ text: "rotation y",
				init: {font:10, pos:[30, -10]},
				action: {anim:{dur:6, ease:"linear"}, rot:{y:720}}
			{ text: "rotation z",
				init: {font:10, pos:[32, 32]},
				action: {anim:{dur:6, ease:"linear"}, rot:{z:720}}