Animating linear gradient with gsap makes the colors transparent mid animation

[roshit121]

I am trying to animate the background gradient. It gets fully transparent mid animation before changing colors.
Also i am getting slightly different results when i use gsap.to, gsap.from and gsap.fromTo.
Have tried using hsl format as well but i got the same results.

See the Pen azmzWzJ by RoshitShrestha (@RoshitShrestha) on CodePen.

[mvaneijgen]

Lets take your hsl example 

// As you can see these strings are not the same 
linear-gradient(180deg, hsl(292, 100%, 95%), hsl(338, 100%, 94%))

linear-gradient(135deg, hsl(292, 50%, 49%), hsl(278, 39%, 42%) 40%, hsl(253, 71%, 22%))

// if we just pick one part of your string
linear-gradient(180deg
linear-gradient(135deg
// This will animate perfectly. GSAP is smart and will comepare your strings and sees the diffrence between 180 and 135 and tween these numbers accordnely
                
// The issue with the full tween is that the strings are not comparable, the .to() tween has a lot more data points and GSAP tries it best to interpate between them, but there is just a whole new set of data that needs to get add in the middle of the tween.
                

When animating between complex strings you need to make sure that the input and out put is of the same format 

 

// So this would work 
linear-gradient(180deg, hsl(292, 100%, 95%), hsl(338, 100%, 94%) 40%, hsl(338, 100%, 94%))

linear-gradient(135deg, hsl(292, 50%, 49%), hsl(278, 39%, 42%) 40%, hsl(253, 71%, 22%))


// And you also need to make sure the values are of the same suffix eg this would not work 
linear-gradient(180deg, hsl(292, 100%, 95%))

linear-gradient(135px, hsl(292, 123, ABC))

 

Some times it can also be easier to split these complex strings it to parts and just animate parts of them. For this you can use CSS variables

 

// So instead of 
linear-gradient(180deg
                
// You can also convert this to a varilbe 
linear-gradient(var(--deg) 

// And just target the variable
gsap.to("html", {"--deg":"#0ae448", yoyo:true, repeat:20, duration: 1});

 

Hope it helps and happy tweening!