noviedo Posted September 16, 2020 Share Posted September 16, 2020 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. chrome.mov safari.mov See the Pen abNabNV by nazarenooviedo (@nazarenooviedo) on CodePen Link to comment Share on other sites More sharing options...
GreenSock Posted September 16, 2020 Share Posted September 16, 2020 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! 3 Link to comment Share on other sites More sharing options...
noviedo Posted September 16, 2020 Author Share Posted September 16, 2020 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now