diff --git a/examples/images/petal-vert-605-871.png b/examples/images/petal-vert-605-871.png
new file mode 100644
index 0000000..372f9ea
Binary files /dev/null and b/examples/images/petal-vert-605-871.png differ
diff --git a/examples/images/petale-bleu-605-1032.png b/examples/images/petale-bleu-605-1032.png
new file mode 100644
index 0000000..4051a6a
Binary files /dev/null and b/examples/images/petale-bleu-605-1032.png differ
diff --git a/examples/images/petale-jaune-700-871.png b/examples/images/petale-jaune-700-871.png
new file mode 100644
index 0000000..9115c5a
Binary files /dev/null and b/examples/images/petale-jaune-700-871.png differ
diff --git a/examples/images/petale-violet-766-965.png b/examples/images/petale-violet-766-965.png
new file mode 100644
index 0000000..19ab889
Binary files /dev/null and b/examples/images/petale-violet-766-965.png differ
diff --git a/examples/images/petales.png b/examples/images/petales.png
new file mode 100644
index 0000000..968f28d
Binary files /dev/null and b/examples/images/petales.png differ
diff --git a/examples/index-animation-following-path.html b/examples/index-animation-following-path.html
new file mode 100644
index 0000000..6686ce4
--- /dev/null
+++ b/examples/index-animation-following-path.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+	<meta charset="UTF-8">
+	<!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge"><![endif]-->
+	<title>Elements following a bezier path</title>
+	<!--meta name="viewport" content="width=device-width,initial-scale=1.0"-->
+	<meta name="viewport" content="width=device-width">
+	<meta content="" name="description">
+	<link rel="stylesheet" href="structure.css" media="all">
+	<script type="text/javascript" src="../extlib/jquery-2.2.4.js"></script>
+	<script type="text/javascript" src="../extlib/jquery.path/jquery.path.js"></script>
+	<script type="text/javascript" src="../extlib/jquery.path/jquery.cssHooks.transform.js"></script>
+	
+	<!--  include of the iFSM Animation tool -->
+	<script type="text/javascript" src="../iFSMAnimation.js"></script>
+	<!-- include of iFSM - see https://github.com/intersel/iFSM/ -->
+	<script type="text/javascript" src="../extlib/iFSM/iFSM.js"></script>
+</head>
+<body>
+	<header id="header" role="banner">
+	</header>
+	<div id="animation">
+	
+	    <section id="animation-objectsonpath" 
+	    			data-delay-before-restart="3500" 
+	    			data-box-size-reference="2000,2000" 
+	    			data-box-responsive="true" 
+	    			data-div-class="animationDiv"  
+	    			data-loader-class="animationLoader"
+	    			data-keep-height-visible="true"
+	    			>
+ 	        <article id="petale_vert" 
+	        			data-animation="specialAnimateNoWait,3000,{path : greenLogoPath}"
+	        			data-enter-animation="display, 0, 775,775,775,775" 
+	        			data-exit-animation="smoothHide,0,-1210,0"
+	        	>
+	        	<img src="images/petal-vert-605-871.png">
+	        </article>
+ 	        <article id="petale_bleu" 
+  	           			data-animation="specialAnimateNoWait,3000,{path : blueLogoPath}"
+	        			data-enter-animation="display, 0, 774,1040,774,1040" 
+	        			data-exit-animation="smoothHide,0,-1210,0"
+	        	>
+	        	<img src="images/petale-bleu-605-1032.png">
+	        	yes I<br> follow<br> 
+	        	a Bezier<br> path!<br>
+	        	and rotate<br>
+	        	accordingly
+	        </article>
+ 	        <article id="petale_orange" 
+  	           			data-animation="specialAnimateNoWait,3000,{path : orangeLogoPath}"
+	        			data-enter-animation="display, 0, 923,775,923,775" 
+	        			data-exit-animation="smoothHide,0,-1210,0"
+	        	>
+	        	<img src="images/petale-jaune-700-871.png">
+	        	with the dotted path
+	        </article>
+  	        <article id="petale_violet" 
+  	           			data-animation="specialAnimateNoWait,3000,{path : violetLogoPath}"
+	        			data-enter-animation="display, 0, 1024,930,1024,930" 
+	        			data-exit-animation="smoothHide,0,-1210,0"
+	        	>
+	        	<img src="images/petale-violet-766-965.png">
+	        </article>
+		</section>
+	</div>
+	<audio id="music" src="musique/bethlem-jazz.mp3" preload="auto"></audio>
+	<button id="onoff_music"></button>
+	<footer id="footer"></footer>
+	<script>
+	
+	//give the global box of the paths
+	$().iFSMAsetGeneralSize($('#animation-objectsonpath').attr('data-box-size-reference'));
+	
+	
+  	var greenLogoPath = new $.path.bezier({
+        start: { x:775, y:775, angle: -50},	
+      	end: {x:900,y:950, angle: 15},
+      	rotator: new $.path.rotators.setRotation(45),
+      	trace:false
+      });
+	var blueLogoPath = new $.path.bezier({
+        start: { x:774, y:1040, angle: -80},	
+      	end: {x:-320,y:1013, angle: 60},
+		rotator: new $.path.rotators.followPath(),
+      	trace:false
+      });
+	var orangeLogoPath = new $.path.bezier({
+        start: { x:923, y:775, angle: -80},	
+      	end: {x:2320,y:805, angle: 60},
+      	rotator: new $.path.rotators.setRotation(45),
+      	trace:true
+      });
+	var violetLogoPath = new $.path.bezier({
+        start: { x:1024, y:930, angle: -80},	
+      	end: {x:1200,y:2320, angle: 60},
+      	rotator: new $.path.rotators.setRotation(75),
+      	trace:false
+      });
+	
+	$(document).ready(function() {
+		$('section#animation-objectsonpath')
+			.iFSMAnimation(
+					{	debug:false
+						,logFSM:'FSM_1,FSM_20,FSM_37'
+						});
+
+		//Button
+		$("#music").iFSM(musicMachine,{debug:true});
+		$("#onoff_music").iFSM(buttonOnOffMachine,{sendTo:$('#music'),text:{on:'Sound On',off:'Sound Off'},debug:true});
+		
+	});
+	</script>
+	
+</body>
+</html>
diff --git a/examples/index2.html b/examples/index2.html
index f348869..a1e5403 100644
--- a/examples/index2.html
+++ b/examples/index2.html
@@ -29,52 +29,49 @@
 		<h2>Some animation examples using iFMSAnimation :-)</h2>
 	</header>
 	<div style="float:left;width:551px;">
-    <section id="animation-objects" 
-    			data-delay-before-restart="3000" 
-    			data-box-responsive="true"  
-    			data-div-class="animation"
-    			data-box-size-reference="551,551"
-    			>
-        <article id="HappyNewYear_B" 
-        			data-animation="loop, 2000, 190, 204, 90, 104, 0, 3000" 
-        			data-enter-animation="display, 2000, 90, 104, 90, 0" 
-        			data-exit-animation="smoothHide,1000,90,104"
-        			style="width:50px;"
-        >
-        	<img src="images/B.png"><br>
-        	I'm looping forth and back....
-        </article>
-        <article id="HappyNewYear_A" 
-        			data-animation="specialAnimate,3000,{path : aPath}" 
-        			data-enter-animation="display,2000,335,275,335,235" 
-        			data-exit-animation="smoothHide,1000,383,168,383,168"
-        			style="width:50px;"
-        >
-        	<img src="images/A.png">I'm turning following an arc path...
-        </article>
-	</section>
+	    <section id="animation-objects" 
+	    			data-delay-before-restart="3000" 
+	    			data-box-responsive="true"  
+	    			data-div-class="animation"
+	    			data-box-size-reference="551,551"
+	    			>
+	        <article id="HappyNewYear_B" 
+	        			data-animation="loop, 2000, 190, 204, 90, 104, 0, 3000" 
+	        			data-enter-animation="display, 2000, 90, 104, 90, 0" 
+	        			data-exit-animation="smoothHide,1000,90,104"
+	        			style="width:50px;"
+	        >
+	        	<img src="images/B.png"><br>
+	        	I'm looping forth and back....
+	        </article>
+	        <article id="HappyNewYear_A" 
+	        			data-animation="specialAnimate,3000,{path : aPath}" 
+	        			data-enter-animation="display,2000,335,275,335,235" 
+	        			data-exit-animation="smoothHide,1000,383,168,383,168"
+	        			style="width:50px;"
+	        >
+	        	<img src="images/A.png">I'm turning following an arc path...
+	        </article>
+		</section>
 	</div>
 	<div id="animation2" class="animated_section" data-box-size-reference="551,451">
 		<div id="hello" 
 			class="anim2"
 			data-animation="loop, 2000, 300, 0, 50, 0, 3000" 
-			data-enter-animation="display, 100, -100, 0">
-			hello
+			data-enter-animation="display, 1000, 300,0,-100, 0, easeOutBounce">
+			hello coming forth and back
 		</div>
-		<div id="hello2" 
-			class="anim2"
-			data-animation="loop, 2000, 0, 100, 180, 300, 5" 
-			data-enter-animation="display, 100, -100, 0" >
-			hello2
-		</div>
-		<div id="hello3" 
+		<div id="waypoints" 
 			class="anim2"
 			data-animation="specialAnimateNoWait,12000,{path : myFirstFollowLinePath},,,,easeInOutQuint" 
-			data-enter-animation="display, 1000, 60, 40, -100, 0">hello3</div>
-		<div id="world" 
+			data-enter-animation="display, 1000, 60, 44, -100, 0">
+			Following a waypoint path<br>
+			with an 'easeInOutQuint' effect
+		</div>
+		<div id="arc" 
 			class="anim2"
 			data-animation="specialAnimateNoWait,3000,{path : aPath2},,,,easeInElastic" 
-			data-enter-animation="display, 1500, 350, 190, -100, 0" >World!</div>
+			data-enter-animation="display, 1500, 350, 190, -100, 0" >Along an arc,<br>with elastic effect!</div>
 	</div>
 	<footer id="footer" role="footer">
 		<p>
@@ -82,6 +79,10 @@ <h2>Some animation examples using iFMSAnimation :-)</h2>
 		</p>
 	</footer>
 		<script>
+		
+		//give the global box of the paths
+		$().iFSMAsetGeneralSize($('#animation-objects').attr('data-box-size-reference'));
+		
 		var arc_params = {
 			    center: [285,185],  
 			        radius: 100,    
@@ -93,7 +94,7 @@ <h2>Some animation examples using iFMSAnimation :-)</h2>
 		var arc_params2 = {
 			    center: [200,200],  
 			        radius: 150,    
-			        start: 100,
+			        start: 92,
 			        end: 90,
 			        dir: 1
 			  }
diff --git a/examples/structure.css b/examples/structure.css
index b7d63db..e9b0fa8 100644
--- a/examples/structure.css
+++ b/examples/structure.css
@@ -54,8 +54,16 @@ body {
 /*	background-color:	#1c3970;*/
 }
 
-section#animation-objects article {
+#animation-objectsonpath {
+	background: #fff;
+}
+
+
+section article,div#animation2 div {
 	opacity		: 0;
+	color		: orange;
+	font-family: Arial,Helvetica Neue,Helvetica,sans-serif;
+	font-size	: 12px;
 /*	width:1300px;
 	height:500px;
 	*/
diff --git a/extlib/jquery.path/jquery.path.js b/extlib/jquery.path/jquery.path.js
index c1d191d..9855d44 100644
--- a/extlib/jquery.path/jquery.path.js
+++ b/extlib/jquery.path/jquery.path.js
@@ -181,6 +181,10 @@
     		initAtan2 = Math.atan2(initVector.y, initVector.x);
     		angle = 0;
     	}
+    	if (initVector.x == prevState.vectx && initVector.y == prevState.vecty) 
+    	{
+    		angle = 0;
+    	}
     	else
     	{
         	angle = Math.atan2(prevState.vecty, prevState.vectx) - initAtan2;
@@ -231,6 +235,18 @@
     if($.path.rotators.isRotator(fx.end.rotator)) 
     {
         var myElem =  $(fx.elem);
+
+    	if (fx.pos == 0)
+    	{
+    		myElem.attr('prevState_x',0);
+        	myElem.attr('prevState_y',0);
+    		myElem.attr('prevState_vectx',0);
+        	myElem.attr('prevState_vecty',0);
+        	myElem.attr('prevState_orix',0);
+        	myElem.attr('prevState_oriy',0);
+        	myElem.attr('prevState_rotate',0);
+    	}
+    	
     	var prevState = {	
 				x:myElem.attr('prevState_x'),
 				y:myElem.attr('prevState_y'),
