Jump to content
Search Community

SVG linearGradient [Safari Issue]

noviedo test
Moderator Tag

Recommended Posts

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.)
66604458_ScreenShot2020-09-16at16_30_20.png.48ced53b1ab1af7a31a7676385701e71.png
 

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

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

Link to comment
Share on other sites

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!

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...