Elastic Words

Each word in the text is styled as a panel and animated into place. Padding is added to lines and words, so they are all evenly separated. The text is word wrapped using the text width property.

A gate swing effect is created using the rotation and transform orgin properties together.

Exit Effect

The second story can be viewed by clicking the button labeled 2 under the editor. It adds additional animation which fades the words away.

story = {
	canvas:{
		init:{bg:"#BADA55"}
	},
	item:{
		text:[
			"The Quick Brown",
			"Fox Jumped Over",
			"The Lazy Dog !"
		],
		init:{
			font:{size:14, lineHeight:100},
			width:90
		},
		lineInit:{ padding:true },
		wordInit:{
			origin:{y:-50, expand:true}, 
			rotation:{x:100}, 
			opacity:0, 
			bg:"orange", 
			border:true,
			corners:true,
			padding:true
		},
		wordAction:{
			anim:{dur:6, stagger:0.12, ease:"elastic"},
			rotation:false,
			opacity:false
		}
	}
};
story = {
	canvas:{
		init:{bg:"#BADA55"}
	},
	item:{
		text:[
			"The Quick Brown",
			"Fox Jumped Over",
			"The Lazy Dog !"
		],
		init:{
			font:{size:14, lineHeight:100},
			width:90
		},
		lineInit:{ padding:true },
		wordInit:{
			origin:{y:-50, expand:true}, 
			rotation:{x:100}, 
			opacity:0, 
			bg:"orange", 
			border:true,
			corners:true,
			padding:true
		},
		wordActions:[
			{
				anim:{dur:6, stagger:0.12, ease:"elastic"},
				rotation:false,
				opacity:false
			},
			{
				anim:{dur:5, stagger:0.2},
				pos:{y:30,z:50},
				rot:{x:90},
				scale:120,
				opacity:0
			}
		]
	}
};