Hello, i am trying to learn the new gsap (v3) and having a problem Splittext not working nicely with WebkitBackgroundClip on Chrome. Text just becomes invisible. Works on Firefox though. Code is very simple:
... some simple js codes ...
text.style.background = "-webkit-linear-gradient(45deg, rgb(255,0,0), rgb(0,255,0))";
text.style.WebkitBackgroundClip = "text";
text.style.color = "transparent";
mySplitText = new SplitText(text, { type: "chars" })
gsap.to(mySplitText.chars, {duration: 0.25, autoAlpha: 1, stagger: 0.125})
One strange thing is, when i inspect the element.style of the text in Chrome devtools, the computed style was transformed into:
background: -webkit-linear-gradient(45deg, rgb(255, 0, 0), rgb(0, 255, 0)) text;
a word "text" is appended at the end. No idea, how and where this comes from. This makes the style invalid of course. And when i remove text.style.WebkitBackgroundClip = "text"; from my code, the computed style in Devtool doesn't have the word "text" at the end anymore and i can see the gradient (only the gradient box of course).
(in firefox the (gradient) text appears as expected, but the animation looks wrong, (autoAlpha seems to be working there at least)).
I read someone was saying in stackoverflow, that the clip shouldn't be applied on the parent element (Splittext creates an array of chars as childNodes, am i right?). Can someone point me in the right direction, how to approach this problem?