Documentation

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"));
MethodDescriptionAvailable from version
BX.easingConstructor.
BX.easing.prototype.animateLaunches animation.
BX.easing.prototype.animateProgressRarely 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 functionsFunctions, 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();


© «Bitrix24», 2001-2022
Up