Jump to content


SplitText gradient text not working on mobile device

Recommended Posts

I have a sentence animated with gsap split text plugin and it works fine on desktop but on mobile the gradient text disappears. 

If I remove the split text from the sentence it works but after pluggin split text it stops working. What could be causing this? 


I have reproduced the problem here to a simple demo: https://codesandbox.io/s/recursing-alex-xt02xk?file=/src/index.js

Try to open this demo with phone so you can see the problem.


Any hints are greatly appreciated!

Link to comment
Share on other sites

I checked on my iPad and it seemed fine. This doesn't sound like a GSAP question, but more of a browser/CSS one. I'd suggest just taking the results of the split text where there are a bunch of <div> elements and see if you can get that to work the way you want (remove SplitText from the equation). Perhaps it's a browser support issue on the devices you're trying it on (-webkit-background-clip: text;  background-clip: text;) or maybe you need to make sure the background color of the containing elements is black or white or whatever is necessary for the effect you want. 

Link to comment
Share on other sites

I removed Split Text and it works fine but now I don't have the animation:( I'll try to figure this out and post it here If I come up with something.

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.