Make your animations really smooth with Smooth Animate!

Scroll down with smooth!
Get plugin

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

Lines of Code
Cups of Coffee
Show me how!
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); } }); }

Why should I use it?

Actually you shouldn't. But... if you want to have nice and smooth animations on your website you can get it. Here's some reasons:

Faster than jQuery
A few tens of times faster!
Smoother than CSS
Can you imagine?
28 predefined Easings
+ your own custom cubic Bezier curves
Small size
Something about 5 kb in minified version
Cross-browser code
No Dependencies
Works with and without jQuery

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().

//jQuery way:
$('.someclass').smoothAnimate({ width: 150 });
$('.someclass').smoothAnimate({ width: '150px' });
$('.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:

	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:

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

		//Pure js way (preferred :)) = '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


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

An object of CSS properties and values to animate. Also it accepts 3 specific properties:
Make smooth scroll from current scroll position to specified value(relative to the Top of the document). If array is passed - scroll from the start to the end value. Example: [0, 1000]
Make smooth scroll from current scroll position to specified value(relative to the Left corner of the document). If array is passed - scroll from the start to the end value
Property gives you full control to animate whatever you want. See step function below for more info.
An object of options:
A string or number determining animation duration in ms.
Option indicating which easing function to use for the transition. There is 28 predefined easings OR you can specify custom cubic-bezier coordinates in array.
A Boolean indicating whether to place the animation in the queue. If false, the animation will begin immediately
{Function( progress, element, value )}
Function to be called after each step of the animation, only once per animated element regardless of the number of animated properties. It provides next arguments: progress - value in range from 0.0 to 1 that shows time progress of the animation, element - current animated element(Raw DOM Element), value - current value for the last animated property.
{Function( elements )}
Function that is called once when animation is complete. Provides elements argument for further handling.

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)
	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:
	width: ['50%', '40%']
	duration: 1000,
	easing: [0.3,0.65,0.8,1]

//it's not necessary in px case:
	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:

	scrollTop: 650 //it means from current scroll position to 650(relative to the top of the document)
	scrollTop: [100, 800] //from 100 to 800 px
	easing: 'easeInSine'

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

	left: '+=10' //it means +10px from current value)
	left: '-=20'
	left: '*=2'
	left: '/=3'


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

	.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

	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 = '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.