Use CSS animations to clean up JS

front-end/css/style.css

@@ -14,12 +14,9 @@ body {
 }
 
 button {
-	/* Background: */
 	background-image: linear-gradient(-180deg, #4C98FE 0%, #0664E3 100%);
-	/* Sketch doesnt export gradient borders at this point */
 	box-shadow: 0px 0px 1px 0px rgba(0,0,0,0.15);
 	border-radius: 3px;
-	/* Button: */
 	font-size: 14px;
 	color: #FFFFFF;
 	letter-spacing: -0.11px;
@@ -48,6 +45,7 @@ footer {
 	width:100%;
 	text-align: center;
 	border-top: 1px solid #EDEAE8;
+	background: white;
 }
 
 #app {
@@ -71,5 +69,31 @@ footer {
 	text-align: right;
 }
 
+@keyframes moveLeft {
+    0%   {margin-left: 0px;}
+    100% {margin-left: 160px;}
+}
+
+@keyframes moveBack {
+    0%   {margin-left: 160px;}
+    100% {margin-left: 0px;}
+}
+
+#app.flashing #logo {
+	animation: moveLeft 500ms ease-in;
+	margin-left: 160px;
+}
 
+#app.flashing #form {
+	display: none;
+}
+
+#app.finished #logo {
+	animation: moveBack 500ms ease-in;
+	margin-left: 0px;
+}
+
+#app.finished #form {
+	display: inline-block;
+}
 

front-end/index.html

@@ -54,7 +54,6 @@
     </div>
     
     <footer><span id="status"></span></footer>
-
     <!-- Javascript -->
     <script src="js/app.js" charset="utf-8"></script>
 </body>

front-end/js/app.js

@@ -103,7 +103,6 @@ serialScanner.on("error", onError);
  * Updates UI to say it's ready
  */
 function readyToFlash() {
-    form.style.opacity = 1;
     appStatus.textContent = "Ready";
     enableInputs();
 }
@@ -188,6 +187,7 @@ function flashWithManifest(manifest) {
                 .then((result) => {
                     new Notification("Flash Finished!");
                     readyToFlash();
+                    restoreUI();
                     log.info("Flashed to latest Espruino build!", result);
                 });
         }).catch((error) => {
@@ -256,33 +256,29 @@ function updateProgressBar(percent, svg){
 }
 
 function prepareUIForFlashing(callback) {
-    let marginLeft = 0;
-    let incrementor = 0.01;
     let percent = 100;
-
-    let centerLeft = (appWrapper.clientWidth - logoWrapper.clientWidth) / 2;
+    appWrapper.classList.remove("finished");
+    appWrapper.classList.add("flashing");
     
-    let interval = setInterval(() => {
-        incrementor += 0.015;
-        marginLeft += 1.5 / incrementor;
-        if(marginLeft <= centerLeft) {
-            logoWrapper.style.marginLeft = marginLeft + "px";
-        } else {
-            clearInterval(interval);
-        }
-    }, 10);
-
     let percentInterval = setInterval(() => {
         percent -= 1;
-        form.style.opacity = percent / 100;
         updateProgressBar(percent, svg);
         if(percent === 0) {
             clearInterval(percentInterval);
-            callback();
+            if(callback) callback();
         }
     }, 1);
 }
 
+function restoreUI(callback) {
+    let percent = 0;
+    appWrapper.classList.remove("flashing");
+    appWrapper.classList.add("finished");
+
+    updateProgressBar(100, svg);
+    if(callback) callback();
+}
+
 /**
  * Get's manifest list for possibilities for flashing,
  * scans serial ports and sets up timer for checking for changes.