Animation functions

EaseIn functions

Standard BX.easing supports 9 types of functions (linear, square, cubic and etc.), that allow to create different types of smooth animation effects:

• BX.easing.transitions.linear
• BX.easing.transitions.quad
• BX.easing.transitions.cubic
• BX.easing.transitions.quart
• BX.easing.transitions.quint
• BX.easing.transitions.bounce
• BX.easing.transitions.elastic
• BX.easing.transitions.back
• BX.easing.transitions.circ

Visually, you can find how the animation of these two functions works here.

EaseOut and EaseInOut-functions

The following two static methods convert easeIn function into the easeOut function and easeInOut function respectively. This way, BX.easing supports 27 types of animations as standard.

BX.easing.makeEaseInOut(easingFunction)

BX.easing.makeEaseOut(easingFunction)

Your own function can be determined as well:

(new BX.easing({
	duration : 1200,
	start:{opacity: 0},
	finish:{opacity: 100},
	transition: function(progress) {
		return Math.abs(Math.sin(3 * Math.PI * progress / 2));
	},
	step : function(state){
		node.style.background = 'rgba(242,245,220,'+(state.opacity/100)+')'
	},
	complete: function()
	{
		node.style.background = '#f2f5dc';
	}
})).animate();

Here, progress and the returned values of function - is the state of animation from 0 to 1.