Jump to content
Search Community

Transforms and text transparency

jedifunk test
Moderator Tag

Recommended Posts

Running into something today and I'm not sure if I'm doing something wrong, or if its a bug in GSAP, or just something I have to work around but ...

 

I have this headline that is stylized with a linear-gradient background, so i have color:transparent set... this is all fine, until I attempt to use a gsap.to function to move its location, at which point when the animation stops, the text disappears. Turning off the transparency makes the text show again, but it no longer has the gradient.

 

Am I doing something wrong or am I missing something?

 

See the Pen zYqLXjV by jedifunk (@jedifunk) on CodePen

Link to comment
Share on other sites

38 minutes ago, jedifunk said:

looks like maybe its just Firefox?

Seems to be.

 

39 minutes ago, jedifunk said:

in the pen i included, when the word "Headline" starts to move (negative y transform), if you stop scrolling, the text completely disappears.

Very interesting. All the styles stay the same. It just chooses not to render it for some reason! It looks like there's already a bug filed for it but it's been untouched for a while so I wouldn't bank on it being fixed any time soon. I would opt for SVG paths with a gradient applied instead if you need to keep the animation. Or just just an image.

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...