There appears to be an issue in GSAP 3 with tweening the background shorthand property when using a linear-gradient, as demonstrated in the CodePen.
Specifying just a linear-gradient works correctly in Chrome and Safari, but not in Firefox, where it doesn't animate at all.
gsap.to('selector', {
background: 'linear-gradient(90deg, rgb(255, 0, 0) 10%, rgb(0, 255, 0) 90%)',
duration: 2
});
Specifying a background color paired with a linear-gradient works correctly in Firefox but not in Chrome or Safari, where it incorrectly animates the linear-gradient rotation in addition to the color.
gsap.to('selector', {
background: 'rgba(0, 0, 0, 0) linear-gradient(90deg, rgb(255, 0, 0) 10%, rgb(0, 255, 0) 90%)',
duration: 2
});
This can be worked around by instead tweening backgroundImage, which works correctly in all browsers, but it would be nice to be able to use the shorthand property.
gsap.to('selector', {
backgroundImage: 'linear-gradient(90deg, rgb(255, 0, 0) 10%, rgb(0, 255, 0) 90%)',
duration: 2
});