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();
     });