Solved

Add animation effect to newsletter signup in footer

flammagreg
Trailblazer
235 0 38

Hi guys, 

 

I've been stuck on this for a while. What's the code to add the animation effect on gucci.com when clicking into their 'email'/newsletter section in their footer. Any help would be greatly appreciated!! My website is seraneeva.com.

Accepted Solutions (2)

EBOOST
Shopify Partner
940 252 288

This is an accepted solution.

Hi @flammagreg ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/theme.min.css
3. Add code below to end of file

#newsletter-footer_form .footer-email-input:focus {
	outline: none;
}
#newsletter-footer_form .footer-email-input {
	border-bottom: 2px solid var(--color-scheme-border-color);
}
#newsletter-footer_form .input-group:before {
	display: none;
}
#newsletter-footer_form .input-group:after{
	position: absolute;
    bottom: 1px;
    border-bottom: 1px solid #fff;
    content: "";
    display: block;
    margin: 0 auto;
    transition: width .8s cubic-bezier(.5,0,0,1);
    width: 0;
    left: 50%;
    transform: translateX(-50%);
}
#newsletter-footer_form .input-group:focus-within:after {
    width: calc(100% + 2px);
}
#newsletter-footer_form #subscribe{
	position: absolute;
	color: #fff;
    margin: 0;
    bottom: 2px;
    right: 0;
    padding-left: 0;
    padding-right: 0;
}
#newsletter-footer_form .input-group {
	width: 60%;
}

4. go to sections/email-signup-banner.liquid. Replace "subscribe" text with code below:

<svg class="is-inversed" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 12L10 8L6 4" stroke-width="1.5" stroke-linejoin="round" stroke="#fff"></path></svg>
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

EBOOST
Shopify Partner
940 252 288

This is an accepted solution.

Hi,

Maybe I suggest code below

.search-drawer #search-input:focus {
  outline: none;
}
.search-drawer .search-input-group:before {
  display: none;
}
.search-drawer .search-input-group {
  position: relative;
}
.search-drawer .search-input-group:after{
    position: absolute;
    bottom: 0;
    border-bottom: 1px solid #000;
    content: ""!important;
    display: block!important;
    margin: 0 auto;
    transition: width .8s cubic-bezier(.5,0,0,1);
    width: 0;
    left: 50%;
    transform: translateX(-50%);
}
.search-drawer .search-input-group:focus-within:after {
    width: 100%;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤

View solution in original post

Replies 6 (6)

EBOOST
Shopify Partner
940 252 288

This is an accepted solution.

Hi @flammagreg ,

May I suggest to update code these steps:

1. Go to Store Online-> theme -> edit code
2. Assets/theme.min.css
3. Add code below to end of file

#newsletter-footer_form .footer-email-input:focus {
	outline: none;
}
#newsletter-footer_form .footer-email-input {
	border-bottom: 2px solid var(--color-scheme-border-color);
}
#newsletter-footer_form .input-group:before {
	display: none;
}
#newsletter-footer_form .input-group:after{
	position: absolute;
    bottom: 1px;
    border-bottom: 1px solid #fff;
    content: "";
    display: block;
    margin: 0 auto;
    transition: width .8s cubic-bezier(.5,0,0,1);
    width: 0;
    left: 50%;
    transform: translateX(-50%);
}
#newsletter-footer_form .input-group:focus-within:after {
    width: calc(100% + 2px);
}
#newsletter-footer_form #subscribe{
	position: absolute;
	color: #fff;
    margin: 0;
    bottom: 2px;
    right: 0;
    padding-left: 0;
    padding-right: 0;
}
#newsletter-footer_form .input-group {
	width: 60%;
}

4. go to sections/email-signup-banner.liquid. Replace "subscribe" text with code below:

<svg class="is-inversed" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M6 12L10 8L6 4" stroke-width="1.5" stroke-linejoin="round" stroke="#fff"></path></svg>
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
flammagreg
Trailblazer
235 0 38

I don't see that page. Would it be on another?

EBOOST
Shopify Partner
940 252 288

does it seem you updated it?

- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
flammagreg
Trailblazer
235 0 38

Do you know how to add the same animation effect to the underline when searching the site from the search icon in the header?

EBOOST
Shopify Partner
940 252 288

This is an accepted solution.

Hi,

Maybe I suggest code below

.search-drawer #search-input:focus {
  outline: none;
}
.search-drawer .search-input-group:before {
  display: none;
}
.search-drawer .search-input-group {
  position: relative;
}
.search-drawer .search-input-group:after{
    position: absolute;
    bottom: 0;
    border-bottom: 1px solid #000;
    content: ""!important;
    display: block!important;
    margin: 0 auto;
    transition: width .8s cubic-bezier(.5,0,0,1);
    width: 0;
    left: 50%;
    transform: translateX(-50%);
}
.search-drawer .search-input-group:focus-within:after {
    width: 100%;
}
- Hope can help. If you find my reply helpful, please hit Like and Mark as Solution
- Need a Shopify developer? Contact email: eboost10@gmail.com
- Visit our site: https://www.eboosttech.net to view and download shopify themes and magento2 extensions free
- ❤❤DONATE ❤❤
flammagreg
Trailblazer
235 0 38

Any chance you could add the same underline animation effect to the links on the customer log in page?? It would be for the "Return to store", "Create account", "Forgot your password?", "Return to store", and "Cancel".