Safari Opacity Not Transitioning on Transparent Text

[joepetrillo]

Hi, I am a new user to GSAP but I am suspecting this is possibly not a GSAP issue. I am not 100% sure.

I have some text I want to fade out, change content and fade back in. I have got it working perfectly, but not on safari.

 

Intended End Result

 

Safari bugged version

The text is using a background linear gradient, so I made the color transparent. When I disable this, it works on safari (but with no gradient).

 

 

If anyone has any idea, I would greatly appreciate some help. Thanks!

 

See the Pen wvmpoNJ by joepetrillo (@joepetrillo) on CodePen

[iDad5]

I actually have it vice versa, Chrome needs -webkit-background-clip: text; and does not show it as intended, Safari 15.5 does. Anyhow, adding the -webkit prefixed version should do the trick:

[joepetrillo]

It still appears to be bugged for me after adding the prefix. Weird.

 

I've decided to just use a solid color on the text instead of a gradient.

[GreenSock]

Yeah, that's totally unrelated to GSAP as far as I can tell - it's purely a CSS and browser rendering thing. You can remove GSAP from the equation completely and you'll see the same thing, right? In fact, the text doesn't get clipped at all in my Chrome (on Mac). 

[joepetrillo]

Yep! Seems to be a browser issue.

This is my site at the moment, I think I came up with an OK solution haha. (timeline section not complete)

https://new-site--jpetrillo.netlify.app/

 

Also, I just want to say these forums have been EXTREMELY helpful as I have been learning GSAP. I have always wanted to add some animation to my site but never bothered since it seemed so tedious. Thanks for being so attentive for such a long time

[GreenSock]

5 minutes ago, joepetrillo said:

Also, I just want to say these forums have been EXTREMELY helpful as I have been learning GSAP. I have always wanted to add some animation to my site but never bothered since it seemed so tedious. Thanks for being so attentive for such a long time

Aw, very kind of you to say. Thanks for noticing. Glad it has been helpful. 

 

Once you get past the initial learning curve, I think you'll be surprised how capable you feel and how easy it'll be to add slick animations. The toughest part is always just deciding to dive in and learn. 

 

You'll have animation superpowers in no time.