New icons

sandbox/Assets/Icon_Pause.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#F2F2F2;}
+	.st2{fill:#3B789A;}
+	.st3{fill:none;}
+	.st4{opacity:0.5;fill:#2C5A74;}
+	.st5{clip-path:url(#SVGID_2_);}
+	.st6{clip-path:url(#SVGID_4_);}
+	.st7{fill:#2C5A74;}
+	.st8{clip-path:url(#SVGID_8_);}
+	.st9{clip-path:url(#SVGID_10_);}
+	.st10{clip-path:url(#SVGID_14_);}
+	.st11{clip-path:url(#SVGID_16_);}
+	.st12{clip-path:url(#SVGID_20_);}
+	.st13{clip-path:url(#SVGID_22_);}
+	.st14{opacity:0.3;fill:#00DC00;}
+	.st15{fill:#00DC00;}
+	.st16{opacity:0.3;fill:#FF0000;}
+	.st17{fill:#FF0000;}
+	.st18{fill:none;stroke:#FF0000;stroke-miterlimit:10;}
+</style>
+<g id="Layer_3">
+</g>
+<g id="Layer_1">
+	<g>
+		<path class="st0" d="M314.1,228.3h28.6v343.5h-28.6V228.3z M485.9,228.3v343.5h-28.6V228.3H485.9z"/>
+	</g>
+</g>
+<g id="Redliner:_Redlines">
+</g>
+</svg>

sandbox/Assets/Icon_Play.svg

@@ -0,0 +1,35 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 800 800" style="enable-background:new 0 0 800 800;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+	.st1{fill:#F2F2F2;}
+	.st2{fill:#3B789A;}
+	.st3{fill:none;}
+	.st4{opacity:0.5;fill:#2C5A74;}
+	.st5{clip-path:url(#SVGID_2_);}
+	.st6{clip-path:url(#SVGID_4_);}
+	.st7{fill:#2C5A74;}
+	.st8{clip-path:url(#SVGID_8_);}
+	.st9{clip-path:url(#SVGID_10_);}
+	.st10{clip-path:url(#SVGID_14_);}
+	.st11{clip-path:url(#SVGID_16_);}
+	.st12{clip-path:url(#SVGID_20_);}
+	.st13{clip-path:url(#SVGID_22_);}
+	.st14{opacity:0.3;fill:#00DC00;}
+	.st15{fill:#00DC00;}
+	.st16{opacity:0.3;fill:#FF0000;}
+	.st17{fill:#FF0000;}
+	.st18{fill:none;stroke:#FF0000;stroke-miterlimit:10;}
+</style>
+<g id="Layer_3">
+</g>
+<g id="Layer_1">
+	<g>
+		<path class="st0" d="M569.5,404.1L288.3,601V207.2L569.5,404.1z M316.4,546.9l204.1-142.8L316.4,261.3V546.9z"/>
+	</g>
+</g>
+<g id="Redliner:_Redlines">
+</g>
+</svg>

sandbox/index-local.html

@@ -23,8 +23,8 @@
             </div>
             <div class="row">
                 <button id="playBtn" class="pause">
-                    <img id="playImg" src="Assets/play.png">
-                    <img id="pauseImg" src="Assets/pause.png">
+                    <img id="playImg" src="Assets/Icon_Play.svg">
+                    <img id="pauseImg" src="Assets/Icon_Pause.svg">    
                 </button>
                 <input id="slider" type="range" min="0" max="100" value="0" step="any">
             </div>

sandbox/index.css

@@ -65,25 +65,25 @@ a {
 }
 
 .footerRight a img {
-    width: 48px; 
-    height: 48px;
-    margin: 4px;
+    width: 36px; 
+    height: 36px;
+    margin: 10px;
 }
 
 .footerRight a:hover {
-    background-color: #162D3A; /* Add a hover color */
+    background-color: #2c5a74; /* Add a hover color */    
 }
 
 .footerRight a:active {
-    background-color: #2c5a74; /* Add a hover color */
+    background-color: #162D3A; /* Add a hover color */
 }
 
 .custom-upload {
     position: relative;
     background:url(./Assets/Icon_OpenFile.svg) center right no-repeat;
-    width: 48px; 
-    height: 48px;
-    margin: 4px;
+    width: 36px; 
+    height: 36px;
+    margin: 10px;
 }
 
 .custom-upload input[type=file]
@@ -172,7 +172,7 @@ a {
     color: white;
     font-weight: bold;
     width: calc(100% - 168px);
-    bottom: 12px;
+    bottom: 10px;
     min-height: 30px;
 }
 
@@ -194,8 +194,8 @@ a {
 }
 
 #animationBar img {
-    width: 25px;
-    height: 25px;
+    width: 36px;
+    height: 36px;
 }
 
 .dropdown {
@@ -271,14 +271,15 @@ a {
     width: 1000px;
     outline: none;
     border-radius: 5px;
-    height: 4px; 
-    margin-top: 10px;   
+    height: 2px; 
+    margin-top: 16px;   
 }
 
+
+
 /*Chrome -webkit */
 #slider::-webkit-slider-thumb {
     -webkit-appearance: none;
-    appearance: none;
     width: 20px;
     height: 20px;
     border: 0;
@@ -296,7 +297,7 @@ a {
 /** FireFox -moz */
 #slider::-moz-range-progress {
   background-color: white;
-  height: 5px; 
+  height: 2px; 
 }
 #slider::-moz-range-thumb{
     width: 20px;
@@ -309,11 +310,11 @@ a {
 /** IE -ms */
 #slider::-ms-fill-lower {
     background-color: white;
-    height: 5px; 
+    height: 2px; 
   }
   #slider::-ms-fill-upper {
     background-color: white;
-    height: 5px; 
+    height: 2px; 
   }  
 #slider::-ms-thumb {
     width: 20px;

sandbox/index.html

@@ -52,8 +52,8 @@
             </div>
             <div class="row">
                 <button id="playBtn" class="pause">
-                    <img id="playImg" src="Assets/play.png">
-                    <img id="pauseImg" src="Assets/pause.png">
+                    <img id="playImg" src="Assets/Icon_Play.svg">
+                    <img id="pauseImg" src="Assets/Icon_Pause.svg">
                 </button>
                 <input id="slider" type="range" min="0" max="100" value="0" step="any">
             </div>

sandbox/index.js

@@ -112,7 +112,12 @@ if (BABYLON.Engine.isSupported()) {
         babylonScene.registerBeforeRender(function () {
             
             if (currentGroup != null && currentGroup.targetedAnimations[0].animation.runtimeAnimations[0] != null) {
-                slider.value = currentGroup.targetedAnimations[0].animation.runtimeAnimations[0].currentFrame;
+                var currentValue = slider.valueAsNumber;
+                var newValue = currentGroup.targetedAnimations[0].animation.runtimeAnimations[0].currentFrame;
+
+                if (Math.abs(currentValue - newValue) > 0.01) {
+                    slider.value = newValue
+                }
             }
         });