Jump to content
Search Community

Malnurtured

Members
  • Posts

    1
  • Joined

  • Last visited

Malnurtured's Achievements

1

Reputation

  1. 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 });
×
×
  • Create New...