Add animation effect to customer account entry pages

[flammagreg]

Hi,

Website: seraneeva.com

How can I replicate the animation effect on the entry on gucci’s log in page on the entries on all customer pages on my website?

[BSSCommerce-HDL]

Hi @flammagreg ,
Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file custom-register.liquid

Step 3: You need create style tags. After insert my code inside style tags

.field {
    position: relative;
    padding-top: 4px;
  }
  
  .field .hidden-label {
    overflow: initial !important;
    clip: unset !important;
    width: auto;
  }

  .field .input-full {
    padding: 17px 18px 10px 18px !important;
  }
  
  .field:has(input:placeholder-shown) > label
  {
    top: 0;
    left: 0;
    transform: translate(17px, 18px);
    margin-bottom: 0;
    transition: transform .3s, -webkit-transform .3s;
    color: gray !important;
  }
  
 .field input::placeholder {
   color: transparent !important; 
 }
  
 .field:has(input:focus) > label,
 .field:has(input:not(:placeholder-shown)) > label
 {
   top: 0;
   left: 0;
   transform: translate(12px, 6px) scale(.85);
   -webkit-transform: translateY(12px, 6px) scale(.85);
   color: black !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