Splittext not working with WebkitBackgroundClip on Chrome (latest).

[Osiris]

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?

[GreenSock]

Welcome to the forums, @Osiris. 

 

I'm not sure that what you're attempting is feasible, at least not cleanly but it has nothing to do with GSAP/SplitText. According to my tinkering, the browser ignores the text if it's in a container with anything except position: static (weird, right?) and SplitText sets things to position: relative but you could certainly change that with a simple gsap.set(). However, browsers seem to be rendering things in a rather fuzzy way (edges aren't anti-aliased cleanly - you can' sorta see the background through):

See the Pen 3727a7655456075ca1f097a5669dd127?editors=0010 by GreenSock (@GreenSock) on CodePen

[Osiris]

Thanks for the reply. Positioning chars as static makes the gradients visible on Chrome (Firefox didn't require that). That is beyond my understanding atm. I played around with your example code on codepen, and one more question (sorry), i can't simply change the opacity, the size, as well as the position of the characters, because the gradient color (and it's position, size) stays the same. Am i right? What do i do, if i want to do that? I saw an example using svg, but that was not as easy as using Splittext. Google search results some cool animations, which apparently use CSS animations, and i intend to avoid CSS animations, because GSAP looks more easier to understand.

Thanks in advance.

[GreenSock]

Hm, I'm not entirely clear on what your goal is - do you want to have the gradient sorta locked into the characters (although the entire gradient spans across them) and then animate them such that the gradient then "goes with them" in a sense? That definitely doesn't sound trivial. 

 

As for CSS animations, I think your instincts are correct (though I'm biased) - I can't think of anything that CSS can do that GSAP can't do. And there's a TON of things that GSAP can do that CSS cannot do. If there was a way for CSS to do what you're describing, then you'd be able to do it with GSAP as well because at its core, GSAP is just a high-speed property manipulator and it can affect CSS properties easily. 

 

SVG would definitely be a good option for an effect like this (if I'm understanding it correctly). Feel free to post a demo. 

 

Good luck with your adventure!

[Osiris]

Thanks Jack.

Exactly, i want to embed the gradient colors in the characters, so i can manipulate them freely ("goes with them" in a sense yes). And it's not trivial i see.

Here is an example i saw while googling: 

See the Pen qmKNeE by giana (@giana) on CodePen

Currently have no idea, how this effect is working (apparently CSS), and it uses some jQuery to select text characters and that's all it has as JS.

I may give up the idea of animating gradient texts for now, maybe in the future when my understanding of CSS, JS or SVG deepens. Thanks for the reply. Have a nice day.

[Cassie]

See the Pen mybQVx by brenna (@brenna) on CodePen

You can do gradient text with SVG, but you can't use splittext to split it into tspans, you'd have to attempt that yourself. (painful)

Alternately you could save the text paths as outlines and then animate the paths. - You can add title and description tags in an SVG to keep the text accessible

[Cassie]

Old pen tweaked to show what I mean 

See the Pen bGqBaoO?editors=1010 by cassie-codes (@cassie-codes) on CodePen

[GreenSock]

8 hours ago, Osiris said:

Currently have no idea, how this effect is working (apparently CSS), and it uses some jQuery to select text characters and that's all it has as JS.

In case it helps, here's a fork that shows that same effect using GSAP to do the animation (and it doesn't use jQuery at all):

See the Pen eYvBKQy by GreenSock (@GreenSock) on CodePen

 

2 hours ago, Cassie said:

Old pen tweaked to show what I mean 

@Cassie when I looked at that on my iPad, nothing showed up at all. I suspect it may be related to your CSS like stroke: url(#rainbow) but I didn't have time to verify. 

[Cassie]

Yeah, looks like gradient strokes don't work in safari. 

Seems like fills are still ok though.

[Osiris]

Thanks for the helps guys. I am a self learner and having responses from experts like you makes the whole learning much less frustrating. I see the SVG is the next thing, i need to learn. Because it offers more compatibility than CSS and GSAP offers some love to the SVG (right?). I also see Safari is an another monster against me.

@Cassie Yes, that is the thing i tried to do. But making outlines out of the texts would not suitable for me, because the gradient text that needed to be animated should be dynamic (meaning it changes depending on the context). I know, i am like an 1 year old baby trying to build a sky scraper. Anyway, i am much more insightful than i was 2 days ago. Thanks guys.

[Cassie]

Yeah, SVG is a good thing to learn! GSAP and SVG go together wonderfully.

Good luck and catch you around the forums. ☺️