anim.js

module.exports = { 
	name: 'circle',
	controls: [
		{ name: 'position', keyframes: [
			{ time: 0, value: [0, 0] },
			{ time: 2, value: [100, 100], ease: 'bounceOut' },
			{ time: 4, value: [0, 100], ease: 'cubicIn' }
		] },
		{ name: 'color', keyframes: [
			{ time: 0, value: [255, 255, 255] },
			{ time: 2, value: [255, 189, 120], ease: 'cubicIn' },
			{ time: 3, value: [100, 189, 100] }
		] },
		{ name: 'alpha', defaultValue: [0.5] }
	]
}

draw.js

//.. the element
var element = { position: [0, 0], color: [255, 0, 255] }


///.. when rendering ..
//loop through each control..
animation.controls.forEach(function(control) {
	//get interpolation at time stamp in timeline
	element[control.name] = control.value(time, easings)
})

ctx.globalAlpha = element.alpha[0]
ctx.fillStyle = rgbStr( element.color )
ctx.fillRect( element.position[0], element.position[1], 50, 50 )