Add animation effect to newsletter signup in footer

[flammagreg]

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.

[EBOOST · 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>

[EBOOST · 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>

[flammagreg]

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

[EBOOST]

does it seem you updated it?

[flammagreg]

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 · 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%;
}

[flammagreg]

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".