Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

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

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

I just realized I can animate stop-opacity instead to make it work in Safari. But still curious about the rgba colors though:)

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