Animation

BX.easing class allows to create animation on the page. Animation in the context of a webpage - its the modification of DOM element design.

core_fx.js extension must be connected before using the methods of BX.easing class.

CJSCore::Init(array("fx"));

Method	Description	Available from version
BX.easing	Constructor.
BX.easing.prototype.animate	Launches animation.
BX.easing.prototype.animateProgress	Rarely used method. Launches animation, but at each iteration, progress handler function is called instead of the step handler function.
BX.easing.prototype.stop(completed)	Stops animation at the current step. If completed=true, then the handler function to stop the animation will be executed additionally.
Animation functions	Functions, that allow to add various types of smooth animation effects.

Example 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();