Animating Text Lines

This example demonstrates an animated teleprompter where each line of text is moved up the screen in turn. However, the lines are staggered so that each line flys into position, making a nice animation effect.

The overall text is slowly moved up the screen with a 35 second "linear" motion. The lines are animated using the lineInit and lineAction entries which initialize and then change the line properties.

Similar to nested layers, text lines, words and characters have their own nesting levels. When a line is positioned, it moves relative to where it would be normally, relative to the overall text’s placement.

story = {
	item:{
		text:[
			"Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
			"Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis.",
			"Quod quidem iam fit etiam in Academia.",
			"",
			"Nam et complectitur verbis, quod vult, et dicit plane, quod intellegam. Habes, inquam, Cato, formam eorum, de quibus loquor, philosophorum.",
			"Sin autem eos non probabat, quid attinuit cum iis, quibuscum re concinebat, verbis discrepare?",
			"Nobis aliter videtur, recte secusne, postea; Illud dico, ea, quae dicat, praeclare inter se cohaerere.",
			"An eum discere ea mavis, quae cum plane perdidiceriti nihil sciat?",
			"Sed vos squalidius, illorum vides quam niteat oratio.",
			"",
			"Re mihi non aeque satisfacit, et quidem locis pluribus.",
			"Sed quia studebat laudi et dignitati, multum in virtute processerat.",
			"Sunt enim prima elementa naturae, quibus auctis artutis quasi germen efficitur.",
			"",
			"Sed mehercule pergrata mihi oratio tua.",
			"Itaque primos congressus copulationesque et consuetudinum instituendarum voluntates fieri propter voluptatem; Quodsi ipsam honestatem undique pertectam atque absolutam.",
			"Compensabatur, inquit, cum summis doloribus laetitia."],
			
		init:{font:5, color:"#A33", width:90, anchor:[0,-50], pos:[0,-20]},
		action:{anim:[35,"linear"], pos:{y:-340}},
		lineInit:{pos:[0,100], padding:{top:5}, opacity:0},
		lineAction:{anim:{dur:1, stagger:1}, pos:false, opacity:100}
	}
};