jquery.anime Plugin Examples

Download This Plugin Back To jQueryScript

A lightweight and dynamic jQuery animation plugin that makes it easy to create and control CSS3 @keyframes based animations on web pages.

$.fn.anime()

#demo1

a
b
c
d
e
f

$('#demo1-a').anime('shake', '1s');
$('#demo1-b').anime('shake', '1s', '1s');
$('#demo1-c').anime('fadeInLeftBig', '1s', 'ease-out');
$('#demo1-d').anime('fadeInLeftBig', '1s', 'ease-in');
$('#demo1-e').anime('shake', '1s', 5);
$('#demo1-f').anime('zoomOutUp', '1s', 6, 'alternate');

#demo2

$('#demo2-a').anime('shake', '2s', function(){
	alert('done!');
});

#demo3

$('#demo3').anime('shake', '1s', {
	backgroundColor : '#' + (100 + Math.ceil(899 * Math.random())),
	width : 50 + Math.ceil(200 * Math.random())
});

#demo4

a
b
c
d

var callback = function(){
	$(this).css('backgroundColor', 'red');
}

$('#demo4-a').anime('shake', '1s', '0.5s', 3, 'ease-out', 'alternate', callback);
$('#demo4-b').anime('shake', 'ease-out', '1s', 3, '0.5s', 'alternate', callback);
$('#demo4-c').anime('shake', 'alternate', '1s', 'ease-out', '0.5s', 3, callback);
$('#demo4-d').anime('shake', callback, '1s', 3, '0.5s', 'alternate', 'ease-out');

$.fn.delay()

We can use Anime with jQuery's delay() method

#demo5

$('#demo1-a').delay(1000).anime('shake', '1s');

$.fn.then()

#demo6

$('#demo6-a').anime('shake', '1s').then().anime('bounce', '1s').then().anime('tada', '1s');

#demo7

var animations ='bounce,flash,pulse,rubberBand,shake,swing,tada,wobble,bounceIn,bounceOut,bounceInDown,bounceOutDown,bounceInLeft,bounceOutLeft,bounceInRight,bounceOutRight,bounceInUp,bounceOutUp,fadeIn,fadeOut,fadeInDown,fadeOutDown,fadeInDownBig,fadeOutDownBig,fadeInLeft,fadeOutLeft,fadeInLeftBig,fadeOutLeftBig,fadeInRight,fadeOutRight,fadeInRightBig,fadeOutRightBig,fadeInUp,fadeOutUp,fadeInUpBig,fadeOutUpBig,flip,flipInX,flipOutX,flipInY,flipOutY,lightSpeedIn,lightSpeedOut,rotateIn,rotateOut,rotateInDownLeft,rotateOutDownLeft,rotateInDownRight,rotateOutDownRight,rotateInUpLeft,rotateOutUpLeft,rotateInUpRight,rotateOutUpRight,hinge,rollIn,rollOut,zoomIn,zoomOut,zoomInDown,zoomOutDown,zoomInLeft,zoomOutLeft,zoomInRight,zoomOutRight,zoomInUp,zoomOutUp,slideInDown,slideOutDown,slideInLeft,slideOutLeft,slideInRight,slideOutRight,slideInUp,slideOutUp';

var $el = $('#demo7-a');
animations.replace(/\w+/g,function(name){
	$el = $el.anime(name,'1s','both').then();
});

$.fn.clearQueue()

You can use jQuery's clearQueue() method to cancel the animation that not yet begun in the queue.

#demo8

a
b

$('#demo8-a').delay(3000).anime('shake', '1s');
$('#demo8-b').anime('shake', '3s').then().anime('bounce', '3s');

setTimeout(function(){
	$('#demo8-a').clearQueue();
	$('#demo8-b').clearQueue();
}, 2000);

Apply same animations on the same element

If you want to apply a same aniamtion on the same element,you can use anime('none') and then use delay() to delay a small time.

#demo9

$('#demo9-a').anime('wobble', '4s');
setTimeout(function(){
	$('#demo9-a').anime('none').delay(10).anime('wobble', '4s');
}, 2000);

$.keyframes()

#demo10

a
b
c

$.keyframes('myAnimation1',{
	'0%' : { width : '50px'},
	'100%' : { width : '100px'}
});
$.keyframes({
	'name' : 'myAnimation2',
	'0%' : { width : '50px'},
	'100%' : { width : '100px'}
});
var myAnimation3 = $.keyframes({
	'0%' : { width : '50px'},
	'100%' : { width : '100px'}
});

$('#demo10-a').anime('myAnimation1', '1s', 'ease-out');
$('#demo10-b').anime('myAnimation2', '1s', 'ease-out');
$('#demo10-c').anime(myAnimation3, '1s', 'ease-out');

#demo11

a
b
c

$.keyframes('rotate',{
	'0%' : { rotate:0},
	'100%' : { rotate:360}
});
$.keyframes('translate',{
	'0%' : { x:0, y:0},
	'100%' : { x:100, y:100}
});
$.keyframes('composite',{
	'0%' : { rotate:0, scale:1, translate:'0,0'},
	'100%' : { rotate:360, scale:2, translate:'100px,100px'}
});

$('#demo11-a').anime('rotate', '2s', 'ease-out', 5);
$('#demo11-b').anime('translate', '2s', 'ease-out', 5);
$('#demo11-c').anime('composite', '2s', 'ease-out', 5);

#demo12

$('#demo12-a').anime({
	'0%' : { rotate:0},
	'100%' : { rotate:360}
}, '2s', 'ease-out');