Make your animations really smooth with Smooth Animate!

What is SmoothAnimate?

SmoothAnimate is tiny, super lightweight (5.2kb minified) javascript plugin that is designed to replace horribly slow jQuery's $.animate(). It makes your animations really smooth and fast unlike jQuery. It's even faster than CSS animations!
But enough words... let's see it in action!

See the Pen vLmWOg by likeaboss (@like-a-boss) on CodePen.

Use it to increase numbers for example

var $elems = $('.numbers__number');
for (var i = 0; i < $elems.length; i++) {
	$($elems[i]).smoothAnimate({
		value: [0, $($elems[i]).data('number')]
	}, {
		duration: 4000,
		eaasing: 'easeOutQuart',
		step: function (progress, el, currentValue) {
			el.textContent = Math.ceil(currentValue);
		}
	});
}

How to use: Short story

Firstly SmoothAnimate can work with and without jQuery. So, if you are not using jQuery, you don't need it!
SmoothAnimate's syntax is very similar to $.animate().
Usage:

//jQuery way:
$('.someclass').smoothAnimate({ width: 150 });
//or
$('.someclass').smoothAnimate({ width: '150px' });
//or
$('.someclass').smoothAnimate({ width: [0, '150px'] });

//Pure javascript:
var smooth = new SmoothAnimate(document.getElementsByClassName('someclass'), { width: 150 });

Note: If the property assumes units other than px, you have to specify them, otherwise it will be px.
So, to be sure that it will be work like assumes recommend to specify start and end values with units:

$('.someclass').smoothAnimate({
	opacity: 0.8,
	//start and end values with units in array
	//units should be specified for one value at least
	width: [0, '50%']
}, {
	duration: 1000
});

If you want to animate some properties with not simple numeric values such as transform you can do this by using a special property value and step function:

$('.someclass').smoothAnimate({
	value: [0, 200]
}, {
	step: function (progress, element, value) {
		//jQuery way (more slow)
		$(element).css('transform', 'translate(0, ' + value + 'px)');

		//Pure js way (preferred :))
		element.style.transform = 'translate(0, ' + value + 'px)';
	},
	duration: 1000,
	easing: 'easeOutSine',
	complete: function (elems) {
		console.log('animation done!');
	}
});

Easings demonstration

SmoothAnimate vs. jQuery

How to use: Long story

Getting Strarted

Include smoothanimate.min.js file in your page

That's all! Now you can animate whatever you want. Just remember: you can animate only numberic properties and values

Options

$(elements).smoothAnimate( properties [, options] ) / new SmoothAnimate( elements, properties [, options] )

Properties and values

All animated properties should be animated to a single numeric value. Non-numeric properties cannot be animated. For example: width, height, left or opacity can be animated but background-color cannot be. Property values are treated as a number of pixels unless otherwise specified, except for unitless properties such as: opacity, font-weight or z-index. Names of properties can be in CSS notation(like margin-top) or camelCase notation(marginTop). Units type em/%/vh/rem/etc can be specified where applicable.

Note:If units are other than px, start and end values should be specified, otherwise plugin will try to get current value of property (in most cases browser returns value in px units regardless which type of units is specified by user) and do animation from this to specified value with applying specified units.
So, this may lead to an unexpected result. Example:

//assume that $elem already has width 50% (that is 600px for example)
$elem.smoothAnimate({
	width: '40%' //start value not specified and units are %
},{
	duration: 1000,
	easing: [0.3,0.65,0.8,1]
});
//plugin will receive the current value (the browser returns 600)
//Okay plugin will set the value to 600 with % units
//and animates width from 600% to 40%

//to prevent surprise like this you should specify
//start and end values for properties with non px units:
$elem.smoothAnimate({
	width: ['50%', '40%']
},{
	duration: 1000,
	easing: [0.3,0.65,0.8,1]
});

//it's not necessary in px case:
$elem.smoothAnimate({
	width: 400 //it means from current value(600) to 400px
},{
	duration: 1000,
	easing: [0.3,0.65,0.8,1]
});

In addition to style properties, some non-style properties such as scrollTop and scrollLeft, as well as CSS properties, can be animated:

$('body').smoothAnimate({
	scrollTop: 650 //it means from current scroll position to 650(relative to the top of the document)
	//or
	scrollTop: [100, 800] //from 100 to 800 px
},{
	easing: 'easeInSine'
});

Relative values also works. There are 4 relative operators: +=, -=, *=, /=:

$elem.smoothAnimate({
	left: '+=10' //it means +10px from current value)
	//or
	left: '-=20'
	//or
	left: '*=2'
	//or
	left: '/=3'
});

Chaining

Of course you can create sequence of animations (only if you use jQuery):

$('body')
	.smoothAnimate({scrollTop: 650}, {easing: 'easeInSine'})
	.smoothAnimate({scrollTop: 0}, {easing: 'easeInSine'}); //it will be called when first animation is finished
	
//or the same thing through complete function:
$('body').smoothAnimate({scrollTop: 650}, {
	easing: 'easeInSine',
	complete: function(elems) {
		elems.smoothAnimate({scrollTop: 0},{easing: 'easeInSine'});
	}
});

Detailed example

$('.someclass').smoothAnimate({
	opacity: 0.8, //opacity will be animated from current value to 0.8
	value: [0, 200] //used for custom handling in step function
}, {
	step: function (progress, element, value) {
		//here you have full control of animation
		//step function will be executed after each step of animation, once per animated element in set
		//it provides the current values of animation:
		//progress(0.0 - 1.0), current animated element, current tween value for the last property(0-200 in this case)
		console.log('progress: ' + progress + ' element: ' + element + ' current value: ' + value);
		console.log('percentage: ' + progress * 100 + '%'); //for example

		//animate translateY property fo example
		element.style.transform = 'translate(0, ' + value + 'px)';
	},
	duration: 1000, //animation duration
	easing: 'easeOutSine', //predefined easing name(see all options above) OR
						   //array with cubic-bezier coordinates. for example: [.58,.25,1,-1.1]
	complete: function(elems) {
		//callback function
		//fired(once) when animation is complete regardless of the number elements in set
		//it provides set of elements for further handling
		console.log('animation complete');
		elems.css('display', 'none'); //for example, why not?
	}
});

Animate whatever you want!

Let's animate pie chart with percentage for example:

See the Pen pgqgKq by likeaboss (@like-a-boss) on CodePen.