Solved

Add same animation effect as gucci newsletter

flammagreg
Trailblazer
250 0 38

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

Accepted Solutions (3)

BSSCommerce-HDL
Shopify Expert
769 249 263

This is an accepted solution.

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

 

 

<label for="Email"  class="hidden-label">Email</label>
                                    <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field footer-email-input" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}">
                                    <input type="hidden" name="contact[tags]" value="newsletter">
                                    <span>
                                        <button type="submit" class="btn footer-email-submit" name="subscribe" id="subscribe">{{ 'general.newsletter_form.submit' | t }}</button>
                                    </span>

 

 

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

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
769 249 263

This is an accepted solution.

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

BSSCommerce-HDL
Shopify Expert
769 249 263

This is an accepted solution.

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 8 (8)

Taknify
Shopify Partner
197 14 24

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. 

Need to tweak your store a bit? Come and visit us at Taknify or send me message.
flammagreg
Trailblazer
250 0 38

I need help

Taknify
Shopify Partner
197 14 24

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

Need to tweak your store a bit? Come and visit us at Taknify or send me message.

BSSCommerce-HDL
Shopify Expert
769 249 263

This is an accepted solution.

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

 

 

<label for="Email"  class="hidden-label">Email</label>
                                    <input type="email" value="{% if customer %}{{ customer.email }}{% endif %}" placeholder="{{ 'general.newsletter_form.newsletter_email' | t }}" name="contact[email]" id="Email" class="input-group-field footer-email-input" aria-label="{{ 'general.newsletter_form.newsletter_email' | t }}">
                                    <input type="hidden" name="contact[tags]" value="newsletter">
                                    <span>
                                        <button type="submit" class="btn footer-email-submit" name="subscribe" id="subscribe">{{ 'general.newsletter_form.submit' | t }}</button>
                                    </span>

 

 

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

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
flammagreg
Trailblazer
250 0 38

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
Shopify Expert
769 249 263

This is an accepted solution.

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
flammagreg
Trailblazer
250 0 38

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
Shopify Expert
769 249 263

This is an accepted solution.

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 😍

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency