Add same animation effect as gucci newsletter

[flammagreg]

Hi guys, 

Website: seraneeva.com

I've been stuck on this for a while. How can I add the same animation effect when a user's clicks into the "Email" section of the newsletter as gucci's? The word "Email" gets smaller, moves above the cursor, and changes to white. Pic for reference:

[BSSCommerce-HDL · Accepted solution]

Hi @flammagreg, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file footer-main.liquid
Step 3: Find "newsletter-footer_form" and inside "input-group" replace to this code: 

<label for="Email"  class="hidden-label">Email</label>
                                    <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field footer-email-input" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}">
                                    <input type="hidden" name="contact[tags]" value="newsletter">
                                    <span>
                                        <button type="submit" class="btn footer-email-submit" name="subscribe" id="subscribe">{{ 'general.newsletter_form.submit' | t }}</button>
                                    </span>

Step 4: Pls insert this code to your file css: 

  .input-group {
    position: relative;
  }

  .hidden-label {
    overflow: initial !important;
    clip: unset !important;
  }
  
  .input-group:has(input:placeholder-shown) > label
  {
    top: 24%;
    left: 1.5%;
    margin-bottom: 0;
    
    transition: all .2s cubic-bezier(.5,0,0,1);
  }
  
 .input-group input::placeholder {
   color: transparent !important; 
 }
  
 .input-group:has(input:focus) > label,
 .input-group:has(input:not(:placeholder-shown)) > label
 {
   top: 2%;
   left: 0.5%;
   transform: scale(0.8) !important;
 }
  .input-group input {
    padding-top: 16px !important;
  }
  

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[BSSCommerce-HDL · Accepted solution]

Hi @flammagreg, I've edited the style a bit. This is the new code

  .input-group {
    position: relative;
  }

  .hidden-label {
    overflow: initial !important;
    clip: unset !important;
  }
  
  .input-group:has(input:placeholder-shown) > label
  {
    top: 24%;
    left: 0%;
    margin-bottom: 0;
    transition: all .8s cubic-bezier(.5,0,0,1);
    color: gray !important;
  }
  
 .input-group input::placeholder {
   color: transparent !important; 
 }
  
 .input-group:has(input:focus) > label,
 .input-group:has(input[type="email"]:not(:placeholder-shown)) > label
 {
   top: -8%;
   left: 0%;
   color: #ffff !important;
   transform: scale(0.8);
 }
  .input-group input {
    padding-top: 16px !important;
  }

  .footer-email-input, .newsletter-footer input.footer-email-input {
    background: transparent !important;
  }
  

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Taknify]

That has to be done on your backend. It will basically listen to an action by a user (in this case a click event), and then we use that to make the font-size of the "Email" title lower. Let me know if you need help on that. 

[flammagreg]

I need help

[Taknify]

Please DM me your access code and url of the store in order for me to help you out. 

[BSSCommerce-HDL · Accepted solution]

Hi @flammagreg, 
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file footer-main.liquid
Step 3: Find "newsletter-footer_form" and inside "input-group" replace to this code: 

<label for="Email"  class="hidden-label">Email</label>
                                    <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field footer-email-input" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}">
                                    <input type="hidden" name="contact[tags]" value="newsletter">
                                    <span>
                                        <button type="submit" class="btn footer-email-submit" name="subscribe" id="subscribe">{{ 'general.newsletter_form.submit' | t }}</button>
                                    </span>

Step 4: Pls insert this code to your file css: 

  .input-group {
    position: relative;
  }

  .hidden-label {
    overflow: initial !important;
    clip: unset !important;
  }
  
  .input-group:has(input:placeholder-shown) > label
  {
    top: 24%;
    left: 1.5%;
    margin-bottom: 0;
    
    transition: all .2s cubic-bezier(.5,0,0,1);
  }
  
 .input-group input::placeholder {
   color: transparent !important; 
 }
  
 .input-group:has(input:focus) > label,
 .input-group:has(input:not(:placeholder-shown)) > label
 {
   top: 2%;
   left: 0.5%;
   transform: scale(0.8) !important;
 }
  .input-group input {
    padding-top: 16px !important;
  }
  

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[flammagreg]

Could you try to make it more like the gucci website? "Email" starts as the same color as the underline, then turns to white as the underline turns to white. Also, the edge of the "E" doesn't move, the word just moves up and gets smaller.

[BSSCommerce-HDL · Accepted solution]

Hi @flammagreg, I've edited the style a bit. This is the new code

  .input-group {
    position: relative;
  }

  .hidden-label {
    overflow: initial !important;
    clip: unset !important;
  }
  
  .input-group:has(input:placeholder-shown) > label
  {
    top: 24%;
    left: 0%;
    margin-bottom: 0;
    transition: all .8s cubic-bezier(.5,0,0,1);
    color: gray !important;
  }
  
 .input-group input::placeholder {
   color: transparent !important; 
 }
  
 .input-group:has(input:focus) > label,
 .input-group:has(input[type="email"]:not(:placeholder-shown)) > label
 {
   top: -8%;
   left: 0%;
   color: #ffff !important;
   transform: scale(0.8);
 }
  .input-group input {
    padding-top: 16px !important;
  }

  .footer-email-input, .newsletter-footer input.footer-email-input {
    background: transparent !important;
  }
  

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[flammagreg]

Looks great! Last thing, could you make "Email" not look like it's bouncing around and make "Email" go to a smaller text and don't move it so high? Video of bouncing: It looks like it readjusts at the last second.

[BSSCommerce-HDL · Accepted solution]

Hi @flammagreg, Pls try with this code css: 

.input-group {
    position: relative;
  }

  .hidden-label {
    overflow: initial !important;
    clip: unset !important;
  }
  
  .input-group:has(input:placeholder-shown) > label
  {
    top: 0;
    left: 0;
    transform: translateY(10px);
    margin-bottom: 0;
    transition: all .8s cubic-bezier(.5,0,0,1);
    color: gray !important;
  }
  
 .input-group input::placeholder {
   color: transparent !important; 
 }
  
 .input-group:has(input:focus) > label,
 .input-group:has(input[type="email"]:not(:placeholder-shown)) > label
 {
   transform: translateY(1px) scale(.6428571429);
   color: #ffff !important;
 }

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍