From 1ec79be4eead68a18eba8b7c03d642fe768f7341 Mon Sep 17 00:00:00 2001
From: stevenhaskell <stevenwhaskell@gmail.com>
Date: Tue, 23 Oct 2018 12:48:00 -0400
Subject: [PATCH] Wrote function for plate animations

Wrote functions for plate animations. Tried using setTimeout but it did not work. Need to look into it more.
---
 js/plateAnimation.js | 114 ++++++++++++++++++++++++++++++-------------
 1 file changed, 79 insertions(+), 35 deletions(-)

diff --git a/js/plateAnimation.js b/js/plateAnimation.js
index 332ff52..b4d2175 100644
--- a/js/plateAnimation.js
+++ b/js/plateAnimation.js
@@ -1,37 +1,81 @@
 function test () {
-	//checks if there are any plates showing
-	if (document.body.contains('.platevisual__plate')) {
-		//animates plates off
-		jQuery('.b-platevisual__plates--left').animate({
-		    opacity: 0,
-		    left: "-=37%",
-		  }, {duration: 500, queue: false });
-		jQuery('.b-platevisual__plates--right').animate({
-		    opacity: 0,
-		    left: "+=37%",
-		  }, {duration: 500, queue: false });
-		//updates plates
-		jQuery(".b-platevisual__plates").html(weighthtml);
-		//animates plates back on
-		jQuery('.b-platevisual__plates--left').animate({
-		    opacity: 1,
-		    left: "+=37%",
-		  }, {duration: 500, queue: false });
-		jQuery('.b-platevisual__plates--right').animate({
-		    opacity: 1,
-		    left: "-=37%",
-		  }, {duration: 500, queue: false });
-	} else {
-		//updates plates
-		jQuery(".b-platevisual__plates").html(weighthtml);
-		//animates plates back on
-		jQuery('.b-platevisual__plates--left').animate({
-		    opacity: 1,
-		    left: "+=37%",
-		  }, {duration: 500, queue: false });
-		jQuery('.b-platevisual__plates--right').animate({
-		    opacity: 1,
-		    left: "-=37%",
-		  }, {duration: 500, queue: false });
-		}
+	        //replaces and animates html for plates required to bar.
+        //if statment works but need to figureout how to step animation.
+        if (jQuery('.b-platevisual__plate').length > 0) {
+            console.log("Test")
+            //animates plates off
+            jQuery('.b-platevisual__plates--left').animate({
+                opacity: 0,
+                left: "-16%",
+              }, {duration: 500, queue: false });
+            jQuery('.b-platevisual__plates--right').animate({
+                opacity: 0,
+                left: "116%",
+              }, {duration: 500, queue: false });
+            //updates plates
+            jQuery(".b-platevisual__plates").html(weighthtml);
+            //animates plates back on
+            jQuery('.b-platevisual__plates--left').animate({
+                opacity: 1,
+                left: "21%",
+              }, {duration: 500, queue: false });
+            jQuery('.b-platevisual__plates--right').animate({
+                opacity: 1,
+                left: "79%",
+              }, {duration: 500, queue: false });
+        } else {
+            //updates plates
+            jQuery(".b-platevisual__plates").html(weighthtml);
+            //animates plates back on
+            jQuery('.b-platevisual__plates--left').animate({
+                opacity: 1,
+                left: "21%",
+              }, {duration: 500, queue: false });
+            jQuery('.b-platevisual__plates--right').animate({
+                opacity: 1,
+                left: "79%",
+              }, {duration: 500, queue: false });
+        }
 	}
+
+function animatePlatesOut () {
+	jQuery('.b-platevisual__plates--left').animate({
+        opacity: 0,
+        left: "-16%",
+     }, {duration: 500, queue: false });
+    jQuery('.b-platevisual__plates--right').animate({
+        opacity: 0,
+        left: "116%",
+     }, {duration: 500, queue: false });
+}
+
+function animatePlatesIn () {
+	jQuery('.b-platevisual__plates--left').animate({
+        opacity: 1,
+        left: "21%",
+     }, {duration: 500, queue: false });
+    jQuery('.b-platevisual__plates--right').animate({
+        opacity: 1,
+        left: "79%",
+     }, {duration: 500, queue: false });
+}
+
+
+function test () {
+	        //replaces and animates html for plates required to bar.
+        //if statment works but need to figureout how to step animation.
+        if (jQuery('.b-platevisual__plate').length > 0) {
+            console.log("Test")
+            //animates plates off
+            animatePlatesOut();
+            //updates plates
+            jQuery(".b-platevisual__plates").html(weighthtml);
+            //animates plates back on
+            setTimeout(animatePlatesIn, 250);
+        } else {
+            //updates plates
+            jQuery(".b-platevisual__plates").html(weighthtml);
+            //animates plates back on
+            animatePlatesIn();
+        }
+	}
\ No newline at end of file