BX.easing

BX.easing(
options
);

Constructor function.

Function parameters

'Options' parameter can have the following settings:

options = {
	duration : duration of animation in milliseconds, by default 1000ms
	start : starting set of values
	finish : finish set of values
	transition : animation function, linear by default 
	step : handler function of each animation iteration
	complete : handler function, which will be executed after animation is finished
	delay: Delay between animation iterations in milliseconds, by default 13ms
	progress : handler function for each animation iteration. It is called only when using animateProgress (see description below)
}

Starting and finish set of values contain values that can change using the animation progress. For example, if we want smoothly show a banner on the page (height and opacity will change from 0 to 100), then, in the 'options' parameter we should specify the following:

start : { height : 0,  opacity : 0 },
finish : { height : 100, opacity : 100 }

The Step handler function will receive Javascript object with the current values of height and opacity for each animation iteration.

Returned value

Returns an object of BX.easing class.

Examples of use

var banner = BX("my-banner");
var easing = new BX.easing({
	duration : 500,
	start : { height : 0, opacity : 0 },
	finish : { height : 100, opacity: 100 },
	transition : BX.easing.transitions.quart,
	step : function(state){
		banner.style.height = state.height + "px";
		banner.style.opacity = state.opacity/100;
	},
	complete : function() {
		banner.style.display = "none";
	}
});
easing.animate();