Add same animation effect as gucci newsletter

Store Design
, , , ,
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: