SVG linearGradient [Safari Issue]

[noviedo 7 Likes (Newbie)]

Hey guys, I´m having an issue on Safari when I try to transition some properties into a <linear Gradient>. I'm using Next.js, but I leave here a minimal codepen to replicate the issue. 
 

Also, I leave some videos to show the error. In Chrome and Firefox works fine, just fail in Safari (Version 13.1.1). I'm getting this error (TypeError: Attempted to assign to readonly property.)

 

Maybe anyone who had this error can help me! thanks in advance.

See the Pen abNabNV by nazarenooviedo (@nazarenooviedo) on CodePen

[GreenSock 12,915 Likes (Superhero)]

That's because you're trying to animate an attribute but you forgot to use the AttrPlugin, so GSAP is taking you literally and attempting to directly get/set properties like "stopColor". Minor note: you don't have to pass an Array of selector text - you can just use a normal selector text string with commas:

 

// BAD
gsap.to(['#cursor-gradient-1', '#cursor-gradient-2'], {
    stopColor: '#000'
});

// GOOD
gsap.to('#cursor-gradient-1, #cursor-gradient-2', {
    attr: {"stop-color": '#000'}
});

Does that clarify things? 

 

Oh, and you don't need to have this line: 

 gsap.killTweensOf(['#cursor-gradient-1', '#cursor-gradient-2', '#cursor-fill-1', '#cursor-fill-2']);

You can simple set overwrite: true or overwrite: "auto" on your tweens. I mean it's totally fine if you prefer explicitly killing things like that, but it seemed more verbose than necessary. 

 

Happy tweening!

[noviedo 7 Likes (Newbie)]

Hey, @GreenSock thanks so much! I totally forgot to use the AttrPlugin. 
 

You are right in all, I just applied your feedback, and works fine for both browsers.
 

Thanks again!