add two animations for the example
diff --git a/player/index.html b/player/index.html
index cc6f98a..c377efd 100644
--- a/player/index.html
+++ b/player/index.html
@@ -42,6 +42,11 @@
     <!-- endbuild -->
 </head>
 <body style="background-color:#ccc; margin: 0px;height: 100%; font-family: sans-serif;font-size: 10px">
-<div style="width:800px;height:800px;background-color:#333;display:inline-block" class="bodymovin" data-bm-path="exports/handicap" data-bm-type="svg" data-bm-loop="true" data-bm-prerender="false"></div>
+<div style="width:800px;height:800px;background-color:#333;display:inline-block" class="bodymovin" data-bm-path="exports/handi1" data-bm-type="svg" data-bm-loop="true" data-bm-prerender="false"></div>
+
+<nav style="position:absolute;top:10px;right:10px;cursor:pointer">
+    <div class="button" data-anim="exports/handi1" style="height:30px;width:30px;background:red;"></div>
+    <div class="button" data-anim="exports/handi2" style="height:30px;width:30px;background:blue;"></div>
+</nav>
 </body>
 </html>
diff --git a/player/js/index.js b/player/js/index.js
index c3c082e..ae73b6b 100644
--- a/player/js/index.js
+++ b/player/js/index.js
@@ -6,6 +6,24 @@
 		element: document.getElementsByClassName('bodymovin')[0],
 		engine: 'svg'
 	});
+
+	var buttons = document.getElementsByClassName('button');
+	console.log(buttons);
+	for (var i = 0; i < buttons.length; i++){
+		buttons[i].addEventListener('click', onButtonClick);
+	}
 	
 
+	function onButtonClick (e) {
+
+		bodyMovin.destroy();
+
+		bodyMovin = new BodyMovin({
+			element: document.getElementsByClassName('bodymovin')[0],
+			engine: 'svg',
+			src: e.currentTarget.getAttribute('data-anim') + '/data.json'
+		});
+
+	}
+
 }, false);
\ No newline at end of file
diff --git a/player/js/interface/AnimationItem.js b/player/js/interface/AnimationItem.js
index 7fb7e84..7449ebf 100644
--- a/player/js/interface/AnimationItem.js
+++ b/player/js/interface/AnimationItem.js
@@ -4,7 +4,8 @@
 		options = {};
 	}
 
-	element = options.element;
+	this.element = options.element;
+	this.src = options.src;
 
 	this._init();
 
@@ -60,7 +61,7 @@
 	this.isLoaded = false;
 	this.isPaused = false;
 
-	this.setData(element);
+	this.setData(this.element);
 
 }
 
@@ -222,6 +223,8 @@
     params.path = wrapperAttributes.getNamedItem('data-animation-path') ? wrapperAttributes.getNamedItem('data-animation-path').value : wrapperAttributes.getNamedItem('data-bm-path') ? wrapperAttributes.getNamedItem('data-bm-path').value :  wrapperAttributes.getNamedItem('bm-path') ? wrapperAttributes.getNamedItem('bm-path').value : '';
     params.animType = wrapperAttributes.getNamedItem('data-anim-type') ? wrapperAttributes.getNamedItem('data-anim-type').value : wrapperAttributes.getNamedItem('data-bm-type') ? wrapperAttributes.getNamedItem('data-bm-type').value : wrapperAttributes.getNamedItem('bm-type') ? wrapperAttributes.getNamedItem('bm-type').value :  'canvas';
 
+    params.path = this.src;
+
     var loop = wrapperAttributes.getNamedItem('data-anim-loop') ? wrapperAttributes.getNamedItem('data-anim-loop').value :  wrapperAttributes.getNamedItem('data-bm-loop') ? wrapperAttributes.getNamedItem('data-bm-loop').value :  wrapperAttributes.getNamedItem('bm-loop') ? wrapperAttributes.getNamedItem('bm-loop').value : '';
     if (loop === '') {
 
diff --git a/player/js/interface/BodyMovin.js b/player/js/interface/BodyMovin.js
index 9d99845..8ef43cf 100644
--- a/player/js/interface/BodyMovin.js
+++ b/player/js/interface/BodyMovin.js
@@ -67,7 +67,8 @@
 BodyMovin.prototype._init = function () {
 
 	this.animationItem = new AnimationItem({
-		element: this.element
+		element: this.element,
+		src: this.src
 	});
 	
 	if (this.data){
@@ -154,6 +155,12 @@
 
 }
 
+BodyMovin.prototype.destroy = function (elapsedTime) {
+
+	this.element.innerHTML = '';
+
+}
+
 // -------------------------------------------------------------------o Getters
 
 BodyMovin.prototype.getDuration = function () {