Add same animation effect as gucci newsletter

Store Design
, , , ,

Topic summary

Goal: replicate Gucci’s newsletter input animation on a Shopify footer so the “Email” label shrinks, moves above the cursor, and turns white in sync with the underline.

Key steps and solution:

  • Initial advice suggested a backend/JS approach listening to click events. A DM for access was requested.
  • A CSS-only approach was provided: edit footer-main.liquid (newsletter-footer_form markup inside input-group) and add CSS using :has() and :placeholder-shown to create a floating label effect without JS.
  • CSS details: when placeholder is shown, label sits over the input in gray; on focus or when text is entered, the label animates upward and scales down, turning white. Input gets extra top padding; background kept transparent.

Iterations based on feedback:

  • Adjusted to better match Gucci: label color transitions with the underline, left edge anchored so the “E” doesn’t shift, slower easing, and refined positions.
  • “Bouncing” was reduced by switching to translateY for both states and a precise scale (~0.6428571429), lowering the final position and smoothing the transition.

Notes:

  • Screenshots were shared; a video of the bounce was referenced.
  • Status: updated CSS provided; awaiting confirmation from the requester. No final resolution marked.
Summarized with AI on December 27. AI used: gpt-5.
1

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:

Screenshot 2024-06-07 at 3.43.59 PM.png
Screenshot 2024-06-07 at 3.43.59 PM.png1356×136 691 Bytes

2

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.

3

I need help

4

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

5

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:

BSSCommerceHDL_0-1717807288250.png
BSSCommerceHDL_0-1717807288250.png1919×872 74.1 KB

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:

BSSCommerceHDL_1-1717807560727.png
BSSCommerceHDL_1-1717807560727.png1919×879 77.6 KB

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 :heart_eyes:

1 Like
6

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.

7

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 :heart_eyes:

1 Like
8

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.

9

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 :heart_eyes:

1 Like