Paths and Easing
There are various paths (curves) and easing which can be applied to our animation. paths will give us the direction of the animation and easing can be used to invert the effects of path. By default, all animation paths are easein.
Paths
PathsDescription
linearEqual time slice for all frames
smoothAnimation will have smooth transformation
growBegins slowly and accelerates
cubicBegins slowly and accelerates
quadBegins very slowly and accelerates
quintBegins very slowly and accelerates immediately
circFollows a circular wave motion
sineFollows a sinusoidal wave motion
bounceWill have a bouncy effect in animation
backBegins in opposite direction and returns to normal direction
elasticWill have a elastic effect in animation

Easing
EasingDescription
defaultAll paths are easein by default. easein should not be explicity mentioned.
easeoutThis will invert the original path effect
easeinoutThis combines easein and easeout. Start with easein and end with easeout
easeoutinThis combines easein and easeout. Start with easeout and end with easein

Example 1 - Paths and Easing
Try with different paths and easing with the below example
Result

Example 2
Combining and pipelining animations on an element
JS HTML CSS
		$.domLoaded(function() {
			
			var box = $.get("#box");
			$.get("#ani").on("click", function() {
			
				// change location
				box.animate({
					to : { x : 200 },
					anim : "Location.smooth",
					duration : 1000,
					oncomplete : function() {
						
						// change height with bounce
						box.animate({
							to : { ht : 200 },
							anim : "Dimension.bounce.easeout",
							duration : 2000
						});		

						// change color
						box.animate({
							to : "#f0f",
							anim : "Color.smooth",
							prop : "background-color",
							duration : 2000, 
							oncomplete : function() {
							
								// change border width
								box.animate({
									to : 5,
									anim : "CSS.smooth.return",
									prop : "border-width",
									duration : 1000
								});									
							}
						});						
						
					}
				});
				
				//change width
				box.animate({
					to : { wid : 400 },
					anim : "Dimension.smooth",
					duration : 1000
				});					
				
			});
			
			$.get("#reset").on("click", function() {							
				window.location.reload();
			});			

		});						
	
<body>
	
	<input type="button" id="ani" value="Animate" /> 
	<input type="button" id="reset" value="Reset" /> 
	<br/>
	
	<div id="box"></div>

</body>
	#box {
		background-color : #99cc33;
		width : 50px;
		height : 50px;
		border: 1px solid #f00;
	}				
						
Result