Paths and Easing in Animation

Installation

CSS Selectors

$.get() Nedil Objects ($.Objs) General Selectors Attribute Selectors Child Selectors Sibling Selectors

Event Handling

on() off() trigger() $.self() $.currentEvent Events

DOM Manipulation

Common - Two ways of Usage addChild() addParent() wrapChildren() removeChild() getChildren() isChild() isParent() nextSibling() previousSibling() isSibling() childIndex()

Utilities

forEach() html() text() pos() posAbs() dim() mouse() mouseAbs() style() css() hasCSSClass() selection() convertHexRGB() cloneJSON()

Data Structures

Stack Queue Table

AJAX APIs

AJAX Request load() ajaxSubmit() toJSON()

Animation APIs

Animation Parameters Location Animation Dimension Animation Color Animation CSS Animation Paths and Easing

Widgets Creation

How to create a widget ? About Default Widgets

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

Paths	Description
linear	Equal time slice for all frames
smooth	Animation will have smooth transformation
grow	Begins slowly and accelerates
cubic	Begins slowly and accelerates
quad	Begins very slowly and accelerates
quint	Begins very slowly and accelerates immediately
circ	Follows a circular wave motion
sine	Follows a sinusoidal wave motion
bounce	Will have a bouncy effect in animation
back	Begins in opposite direction and returns to normal direction
elastic	Will have a elastic effect in animation

Easing

Easing	Description
default	All paths are easein by default. easein should not be explicity mentioned.
easeout	This will invert the original path effect
easeinout	This combines easein and easeout. Start with easein and end with easeout
easeoutin	This 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

JSHTMLCSS
								$.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