Timing Functions

The timing function is the part of an ease that defines the effect.

Eases describe how far properties have progressed at any time within an animation. The simplest example is linear which is aligned directly to the duration; e.g. the animation is 25% along when the duration time is 25% complete. More elaborate functions provide effects such as bouncing or elasticity.

The timing function is set with the ease value of the animation property.

Labels

This story uses nine rotated labels. To avoid duplication, the label properties are added to a class named label, and each text item uses that class.

The labels are set with a transform-origin on the left edge of the text, and then rotated 90 degrees counter-clockwise around that origin. This aligns the text regardless of the text length.

Balls

The y positions of ball images are animated to a lower point and then back. The first animation uses the out ease adjustment, which is the default. On the way back up, the in ease adjustment is explicitly used, which reverses the effect.

story = {
	classes:{
			text:{
			  font:6,  color:"#6A287E",
			  anchor:-50, origin:-50, rot:-90
			}
	},
	frame:{	padding:15 },
	items:[
		{ text:"linear", init:{pos:[-48,-35]} },
		{ itemType:"image", src:"ball.gif", width:5,
			init:{pos:[-48,-32]},
			actions:[
				{anim:[4,"linear"], pos:{y:45}},
				{anim:[4,"linear"], pos:{y:-32}}
			]
		},
		{ text:"bounce", init:{pos:[-36,-35]}	},
		{ itemType:"image", src:"ball.gif", width:5,
			init:{pos:[-36,-32]},
			actions:[
				{anim:[4,"bounce"], pos:{y:45}},
				{anim:[4,"bounce in"], pos:{y:-32}}
			]
		},
		{ text:"elastic",	init:{pos:[-24,-35]} },
		{ itemType:"image", src:"ball.gif", width:5,
			init:{pos:[-24,-32]},
			actions:[
				{anim:[4,"elastic"], pos:{y:45}},
				{anim:[4,"elastic in"], pos:{y:-32}}
			]
		},
		{ text:"back", init:{pos:[-12,-35]}	},
		{ itemType:"image", src:"ball.gif", width:5,
			init:{pos:[-12,-32]},
			actions:[
				{anim:[4,"back"], pos:{y:45}},
				{anim:[4,"back in"], pos:{y:-32}}
			]
		},
		{ text:"sine", init:{pos:[0,-35]}	},
		{ itemType:"image", src:"ball.gif", width:5,
			init:{pos:[0, -32]},
			actions:[
				{anim:[4,"sine"], pos:{y:45}},
				{anim:[4,"sine in"], pos:{y:-32}}
			]
		},
		{ text:"curve", init:{pos:[12,-35]}	},
		{ itemType:"image", src:"ball.gif", width:5,
			init:{pos:[12,-32]},
			actions:[
				{anim:{dur:4, ease:"curve"}, pos:{y:45}},
				{anim:{dur:4, ease:"curve in"}, pos:{y:-32}}
			]
		},
		{ text:"expo", init:{pos:[24,-35]} },
		{ itemType:"image", src:"ball.gif", width:5,
			init:{pos:[24,-32]},
			actions:[
				{anim:[4,"expo"], pos:{y:45}},
				{anim:[4,"expo in"], pos:{y:-32}}
			]
		},
		{ text:"slow mo", init:{pos:[36,-35]}	},
		{ itemType:"image", src:"ball.gif", width:5,
			init:{pos:[36,-32]},
			actions:[
				{anim:[4,"slowmo less"], pos:{y:45}},
				{anim:[4,"slowmoback less"], pos:{y:-32}}
			]
		},
		{ text:"slow mo",	init:{pos:[48,-35]}	},
		{ itemType:"image", src:"ball.gif", width:5,
			init:{pos:[48,-32]},
			actions:[
				{anim:[4,"slowmo more"], pos:{y:45}},
				{anim:[4,"slowmoback more"], pos:{y:-32}}
			]
		}
	]
};