From 6df908b04a4efe8847357f103b4f7503aed5f9a9 Mon Sep 17 00:00:00 2001
From: Steven Haskell <stevenwhaskell@gmail.com>
Date: Tue, 23 Oct 2018 01:46:24 -0400
Subject: [PATCH] Animation script for plates -- In progress

Added animation script for plates. It will animate the plates when adding the plates and removing them but not when updating the weight. Need to figure out how to step the animation.
---
 css/appstyling-v2.css                         |  8 ++--
 ...ght Calculation Script-Edited-Jquery-V4.js | 48 +++++++++++++++++--
 2 files changed, 50 insertions(+), 6 deletions(-)

diff --git a/css/appstyling-v2.css b/css/appstyling-v2.css
index 2fe56d9..5291d73 100644
--- a/css/appstyling-v2.css
+++ b/css/appstyling-v2.css
@@ -138,15 +138,17 @@ p.subheading {
 .b-platevisual__plates--left{
 	top: 50%;
 	transform: translate(-100%, -50%);
-	left: 21%;
-    flex-direction: row-reverse; 
+	left: -16%;
+    flex-direction: row-reverse;
+    opacity: 0; 
 
 }
 
 .b-platevisual__plates--right{
 	top: 50%;
 	transform: translateY(-50%);
-	left: 79%;
+	left: 116%;
+	opacity: 0;
 }
 
 .b-platevisual__plate{
diff --git a/js/Weight Calculation Script-Edited-Jquery-V4.js b/js/Weight Calculation Script-Edited-Jquery-V4.js
index 816a0af..383b466 100644
--- a/js/Weight Calculation Script-Edited-Jquery-V4.js	
+++ b/js/Weight Calculation Script-Edited-Jquery-V4.js	
@@ -84,8 +84,43 @@
 
             }
         }
-        //replaces html for plates required to bar.
-        jQuery(".b-platevisual__plates").html(weighthtml);
+        //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 });
+        }
     }
 
   //Smooth Scrolling
@@ -129,7 +164,14 @@
     jQuery(".b-infoentry__reset").click(function(){
         jQuery(".input-weight, .input-weightsneeded").val('');
         jQuery(".input-final, .input-difference").html('0');
-        jQuery(".b-platevisual__plates").html('');
+        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 });
         jQuery(".b-infoentry__reset, .b-platevisual__weightfinal, .b-platevisual__weightdifference").hide();
     });