SplitText char and gradient text

[swaggle 0 Likes (Newbie)]

Hi! I am trying to do a sine wave splitText effect on gradient text! I can't seem to figure out how to have one giant gradient shared between the entire html element wile also having the gradient constrained to the text! Text should end up looking like attached picture!

 

Thanks for all your help

 

See the Pen a230106e853bbcf1cde82adae35f46f0 by abstract_code (@abstract_code) on CodePen

[mvaneijgen 1,555 Likes (Superhero)]

Hi @swaggle welcome to the forum! 

 

You've disabled the forking of your pen, which makes it harder for anyone to start helping you. 

 

I know there is some CSS tricks to make text transparent and use a background image on the text, but that seems to only work when it's 'normal' text without extra elements sprinkled in 

 

https://usefulangle.com/post/372/css-text-background-image

 

See the Pen Exeygvz by mvaneijgen (@mvaneijgen) on CodePen

 

You can also look in to SVG text with a mask, but there are also cavities with that. 

 

See the Pen GWpPKP?editors=0100 by daiquiri (@daiquiri) on CodePen

 

Or give each letter their own distinct gradient based on the position they are in, this will require some more setup, but is the most robust and has the least caveats with browser support. 

 

Last week I wanted to do something similar, but my gradient was a lot simpler (just two colors), so I used the GSAP util interpolate() with the two colors and based on the position of the letter given each letter a color that was interpolated between the two colors. It is kinda a fake gradient, because each letter has just a solid color, but to me the effect was good enough. Hope it helps and happy tweening! 

 

See the Pen vYzKXpX by mvaneijgen (@mvaneijgen) on CodePen