Animated gradient / smooth background transition help

Site URL: https://lime-wolverine-672z.squarespace.com/

Hello!

I am trying to figure out how to create an animated background on my (trial) site. I tried the most referenced option -

https://www.gradient-animator.com/

and set the id to my collection background:

#collection-60ea7161025aa46e30e0a38a {  

  .css-selector {

background: linear-gradient(270deg, #cfadea, #9b51d5, #7b658c);

    background-size: 600% 600%;

  

    -webkit-animation: AnimationName 30s ease infinite;

    -moz-animation: AnimationName 30s ease infinite;

    animation: AnimationName 30s ease infinite;

}



@-webkit-keyframes AnimationName {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

@-moz-keyframes AnimationName {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

@keyframes AnimationName {

    0%{background-position:0% 50%}

    50%{background-position:100% 50%}

    100%{background-position:0% 50%}

}

  } 

I've also tried this code to no avail and set it to each section background (this is currently up):

section[data-section-id="60ea7162025aa46e30e0a4bd"] .section-background {

    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;

    background-size: 400% !important;

    text-fill-color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-animation: Gradient 10s ease infinite !important;

    -moz-animation: Gradient 10s ease infinite !important;

    animation: Gradient 10s ease infinite !important;

}



section[data-section-id="60ea7162025aa46e30e0a4bb"] .section-background {

    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;

    background-size: 400% !important;

    text-fill-color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-animation: Gradient 10s ease infinite !important;

    -moz-animation: Gradient 10s ease infinite !important;

    animation: Gradient 10s ease infinite !important;

}



section[data-section-id="60ea715052638457540dc335"] .section-background {

    background-image: linear-gradient(100deg,#3874ba,#edccc9) !important;

    background-size: 400% !important;

    text-fill-color: transparent;

    -webkit-text-fill-color: transparent;

    -webkit-animation: Gradient 10s ease infinite !important;

    -moz-animation: Gradient 10s ease infinite !important;

    animation: Gradient 10s ease infinite !important;

}

Am I missing a code block or class id? Do I need to have a business plan for the animations to work? Or are my eyes deceiving me?

Here is my site: https://lime-wolverine-672z.squarespace.com/ and login is pine212apple

Thank you for your help!

Hi. I see gradient here. Did you solve?

Hi, no it doesn't animate at all when I scroll.

I figured it out 😀  if anyone needs help let me know!

If you can post solution here, for other members. Thank you!

Sure,

For the animated gradient, at the beginning of the code, change ".css-selector" to  ".section-background" See the first four lines of the original code below for where it appears (and of course change the collection to your block id).

#collection-60ea7161025aa46e30e0a38a {  

  .css-selector {

background: linear-gradient(270deg, #cfadea, #9b51d5, #7b658c);

    background-size: 600% 600%;

Hello! I tried this out and it worked great, thank you! So far I've applied it to my homepage (see link below).

https://tinycoastdigital.com/

Perhaps this is a silly question, but I was hoping that maybe the animation would only go from the top of the page to the footer. So rather than continuing, the animation stops at the footer and only resumes if you scroll back to the top of the page. 

Does anyone know if this is possible and how it might be achieved? Thanks so much 🙂

Hey! Can anyone help me out why this code is having zero effect? There is no website to show yet, I'm trying to nail the background effect before I begin designing anything else, so it's currently a nearly blank website. I can't identify what is wrong. The goal is coding the effect with 3 colors.

Quote

#collection-64f61a81a2bc902dfede8a5f  {
.css-selector {
    background: linear-gradient(274deg, #fdff70, #b3c3cf, #8e7faf);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
}

On 9/5/2023 at 10:24 PM, newloreco said:

Hey! Can anyone help me out why this code is having zero effect? There is no website to show yet, I'm trying to nail the background effect before I begin designing anything else, so it's currently a nearly blank website. I can't identify what is wrong. The goal is coding the effect with 3 colors.

 

 

This class name doesn't exist in SS, you will need to adjust it for your site

.css-selector

If you share link to your site & let me know which section you want to apply, we can check & give exact class name

11 hours ago, tuanphan said:

This class name doesn't exist in SS, you will need to adjust it for your site

.css-selector

If you share link to your site & let me know which section you want to apply, we can check & give exact class name

Thank you!

Staging site is https://pear-garlic-f5by.squarespace.com/, password Starlight

1 hour ago, newloreco said:

Thank you!

Staging site is https://pear-garlic-f5by.squarespace.com/, password Starlight

The entire background, honestly. Website is going to be one uninterrupted section, so even if it just applies to the first block I can expand it as necessary.

On 9/8/2023 at 3:47 AM, newloreco said:

The entire background, honestly. Website is going to be one uninterrupted section, so even if it just applies to the first block I can expand it as necessary.

You mean first section or whole homepage? Use this code for first section, if you want for whole page, let me know, I will adjust the code

[data-section-id="64f61a81a2bc902dfede8a62"] .section-background-content {
    opacity: 0;
}
[data-section-id="64f61a81a2bc902dfede8a62"] .section-background {
    background: linear-gradient(274deg, #fdff70, #b3c3cf, #8e7faf);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
}

If it's possible for the entire website that would be amazing. Thank you so much!

On 9/11/2023 at 9:45 PM, newloreco said:

If it's possible for the entire website that would be amazing. Thank you so much!

Use this new code

.section-background-content {
    opacity: 0;
}
section, .section-border, .section-background {
    background-color: transparent !important;
}
body {
    background: linear-gradient(274deg, #fdff70, #b3c3cf, #8e7faf);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
}

Hello,

If anyone could share a bit of insight. I'd greatly appreciate it. 

I used the code above to help me with a website I am working on. However, I want the whole site's background gradient to be cohesive. Right now the header area doesn't update.  See the code below. See the website here. Password :  green.

On 9/14/2023 at 4:24 AM, tuanphan said:

Use this new code

.section-background-content {
    opacity: 0;
}
section, .section-border, .section-background {
    background-color: transparent !important;
}

header {
    background: linear-gradient( #57BD18, #19946B, #036A31);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}


body {
    background: linear-gradient( #57BD18, #19946B, #036A31);
    background-size: 600% 600%;
    -webkit-animation: AnimationName 23s ease infinite;
    -moz-animation: AnimationName 23s ease infinite;
    -o-animation: AnimationName 23s ease infinite;
    animation: AnimationName 23s ease infinite;
}
@-webkit-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@-o-keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}
@keyframes AnimationName {
    0%{background-position:42% 0%}
    50%{background-position:59% 100%}
    100%{background-position:42% 0%}
}

 

On 1/30/2024 at 6:56 AM, FloandGo said:

Hello,

If anyone could share a bit of insight. I'd greatly appreciate it. 

I used the code above to help me with a website I am working on. However, I want the whole site's background gradient to be cohesive. Right now the header area doesn't update.  See the code below. See the website here. Password :  green.

 

Use this code under

.header-background-solid, header#header {
    background-color: transparent !important;
}
.header-border {
    border: none !important;
}

I couldn't find it anywhere on the forums, so any insight on how to add a gradient on header H1 text and have it animate?

On 5/31/2024 at 1:49 AM, BHollingsworth said:

I couldn't find it anywhere on the forums, so any insight on how to add a gradient on header H1 text and have it animate?

Header h1, you mean Site Title text? Can you shares site url?