Add Input & textarea label animation

javascripts/global.js

@@ -1029,6 +1029,16 @@ MMCQ = (function() {
     }
   };
 
+  var setFormLabelState  = function() {
+    $('.form_field_textarea, .form_field_textfield').each(function() {
+      var label = $(this).closest('.form_field').find('.edy-fe-label, .form_field_label');
+      if (!$(this).val()) {
+        label.css({transform: "translateY("+ label.height() +"px)", "pointer-events": "none", opacity: 1});
+      }
+      label.css({opacity: 1});
+    });
+  }
+
   var init = function() {
     // Add site wide functions here.
     bindSideClicks();
@@ -1045,6 +1055,17 @@ MMCQ = (function() {
       buildCustomShoppingCartIcon();
     });
 
+    setFormLabelState();
+
+    $('.form_field_textfield, .form_field_textarea').focus(function() {
+      var label = $(this).closest('.form_field').find('.edy-fe-label, .form_field_label');
+      label.css({transform: "translateY(0)", "pointer-events": "all", transition: "all 0.3s cubic-bezier(0.1, 0.6, 0, 1)"});
+    });
+
+    $('.form_field_textfield, .form_field_textarea').blur(function() {
+      setFormLabelState();
+    });
+
     if (!editmode()) {
       wrapTables();
     }

sources/javascripts/concat/global/main.js

@@ -488,6 +488,16 @@
     }
   };
 
+  var setFormLabelState  = function() {
+    $('.form_field_textarea, .form_field_textfield').each(function() {
+      var label = $(this).closest('.form_field').find('.edy-fe-label, .form_field_label');
+      if (!$(this).val()) {
+        label.css({transform: "translateY("+ label.height() +"px)", "pointer-events": "none", opacity: 1});
+      }
+      label.css({opacity: 1});
+    });
+  }
+
   var init = function() {
     // Add site wide functions here.
     bindSideClicks();
@@ -504,6 +514,17 @@
       buildCustomShoppingCartIcon();
     });
 
+    setFormLabelState();
+
+    $('.form_field_textfield, .form_field_textarea').focus(function() {
+      var label = $(this).closest('.form_field').find('.edy-fe-label, .form_field_label');
+      label.css({transform: "translateY(0)", "pointer-events": "all", transition: "all 0.3s cubic-bezier(0.1, 0.6, 0, 1)"});
+    });
+
+    $('.form_field_textfield, .form_field_textarea').blur(function() {
+      setFormLabelState();
+    });
+
     if (!editmode()) {
       wrapTables();
     }

sources/stylesheets/content/_forms.scss

@@ -26,6 +26,7 @@
       position: relative;
       display: block;
       margin-bottom: 4px;
+      opacity: 0;
     }
   }
 

stylesheets/main.css

@@ -428,6 +428,7 @@ p {
   position: relative;
   display: block;
   margin-bottom: 4px;
+  opacity: 0;
 }
 .content-formatted .form_field_required .form_field_label:after {
   content: '*';