Add same animation effect as gucci newsletter

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