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:

[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]

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:

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]

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]

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