Jump to content
Search Community

Safari issue when tweening 'stop-color' of the SVG gradient

Anya test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey guys. Another Safari issue here. This probably refers to svg gradients more than the actual Tweenmax, but in case someone had this issue before and knows a workaround?

I'm trying to animate the stop-color of the gradient to create transparency effect,  but in Safari the color is just white with no alpha, and sometimes it doesn't animate at all.

I'm not quite sure what is happening..

Any input would help! Thanks a bunch.

See the Pen ZROWJQ by slyka85 (@slyka85) on CodePen

Link to comment
Share on other sites

Yeah, it looks like that's totally unrelated to GSAP - Safari just doesn't honor the alpha of rgba() inside stop-color. I guess in some ways it makes sense because you've got alpha/opacity set in TWO places which could conflict - in the stop-color (with rgba()) AND in stop-opacity. So what if the color is rgba(0,0,0,0.5) and stop-opacity is 1? See the problem? I guess the browser could multiply them or something, but it's a bit confusing. 

 

I'd recommend exactly what you discovered - animate stop-opacity instead for the opacity and use rgb() colors. 

 

Make sense? 

  • Like 1
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...