How animate a text with gradient

[clickdeproduto]

Hello everyone, how can I animate with GSAP a gradient text using the css code below? Or some other way.

 

background: linear-gradient(to right,#3b1c52 50%,#b51a84 80%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

 

See the Pen EBQxEK by BrunoMarcorio (@BrunoMarcorio) on CodePen.

[ZachSaucier]

Hello and welcome. In what way are you wanting to animate it?

[clickdeproduto]

22 minutes ago, ZachSaucier said:

Hello and welcome. In what way are you wanting to animate it?

 

Thanks Zach! 

A friend helped me, but it works fluid only in chrome, any idea for running fluid on firefox too?  

Is there a way to get this done only with GSAP?

 

See the Pen jjZWJV by rhcarlosweb (@rhcarlosweb) on CodePen.

[PointC]

Seems fine in Firefox to me. Maybe others see something different? I'm seeing it work in Edge as well, but the gradient is a bit funky.

 

What did you mean here: 

20 minutes ago, clickdeproduto said:

Is there a way to get this done only with GSAP?

 

You're animating with GSAP so I'm confused. Did you mean without the SplitText plugin and only use the core tools?

[clickdeproduto]

Hello PointC, sorry for my explanation. What I wanted to say was: Is it possible to do the gradient in the text without using the CSS: 

 

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

 

Using only GSAP for the gradient. 

[ZachSaucier]

Things like background-clip and text-fill-color are CSS properties - there's no way to do things like that in JavaScript alone (you always need some HTML and CSS along with JS to view it in a browser). You could set those properties with JS/GSAP if you'd like to, but it's up to you whether you want to set those properties in your JS or CSS.

[clickdeproduto]

23 minutes ago, ZachSaucier said:

Things like background-clip and text-fill-color are CSS properties - there's no way to do things like that in JavaScript alone (you always need some HTML and CSS along with JS to view it in a browser). You could set those properties with JS/GSAP if you'd like to, but it's up to you whether you want to set those properties in your JS or CSS.

 

 

yes, I was looking for a solution for gradient text without css, just with javascript, so that it would be compatible with older browsers, the animation only worked in firefox in version 67.

[ZachSaucier]

You could look into a polyfill for old browsers that don't support background-clip: text; Otherwise you would have to use a different approach, like using SVG or canvas. I didn't look into the support tables to see which approach has the best support. But GSAP can animate those just fine.

 

SVG demo: 

 

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

[mikel]

Hi @clickdeproduto,

Hi Zach,

 

To use SVG is super ...

 

See the Pen VJQyrB by mikeK (@mikeK) on CodePen.

 

Happy tweening ...

Mikel

 

 

[PointC]

Yeah, JavaScript isn't gonna have any magic way of making the gradient cross-browser. Getting that to work correctly in all browsers could be a bit tricky. @mikel's approach with SVG paths would work well and you should see consistency across the browser spectrum.

 

If you want actual SVG text, you can do that too. You could use <tspan> elements, but animatable properties will be limited. I'd recommend placing each letter in its own <text> element. It's more work to manually do that, but it should work everywhere.

 

See the Pen MMQOod by PointC (@PointC) on CodePen.

 

If you don't like the manual approach, I made this demo to show how to break strings into SVG <text> elements. It's overkill for what you're doing, but maybe it'll give you some ideas.

 

See the Pen jpEdBd by PointC (@PointC) on CodePen.

 

SVG text animation is not without its caveats though. getBBox() isn't accurate for vertical measuring due to font ascent, descent and the other font metrics, but that's a post for another time.

 

Hopefully that helps a bit. Happy tweening.

 

[clickdeproduto]

 

Thanks everyone for the help, I will study the best solution for my case, I am studying GSAP more and more, my goal is to make amazing websites in the near future.

[Jonathan]

On 6/30/2019 at 9:01 AM, clickdeproduto said:

yes, I was looking for a solution for gradient text without css, just with javascript, so that it would be compatible with older browsers, the animation only worked in firefox in version 67.

 

What specific browsers and browser versions are you trying to target?

[PointC]

Sheesh... where have you been @Jonathan?

 

This conversation mentioned CSS. I thought you appeared instantly when that happened. 

[OSUblake]

On 6/30/2019 at 9:01 AM, clickdeproduto said:

yes, I was looking for a solution for gradient text without css, just with javascript, so that it would be compatible with older browsers, the animation only worked in firefox in version 67.

 

That's called canvas. ?

 

[elegantseagulls]

Hey,

 

I made a light-weight polyfill for something similar (text images) a bit ago that could easily be adapted to work with gradients.

See the Pen Oovbob by elegantseagulls (@elegantseagulls) on CodePen.

[elegantseagulls]

57 minutes ago, elegantseagulls said:

Hey,

 

I made a light-weight polyfill for something similar (text images) a bit ago that could easily be adapted to work with gradients.

 

 

 

Also, could be useful and reasonably easy to integrate SplitText into it for multi-line text blocks.

[clickdeproduto]

11 hours ago, Jonathan said:

 

What specific browsers and browser versions are you trying to target?

 

Hi Jonathan, I would like it to work in the main browsers, chrome, firefox, safari and edge. I could actually use a pollyfill for versions of browsers that do not give this support, but I still do not quite understand wel how to use pollyfill.

[clickdeproduto]

7 hours ago, elegantseagulls said:

Hey,

 

I made a light-weight polyfill for something similar (text images) a bit ago that could easily be adapted to work with gradients.

 

 

Hi elegantseagulls, very cool, but I still do not understand how pollyfill works, but it's something I'll study.

[clickdeproduto]

On 6/30/2019 at 10:20 AM, ZachSaucier said:

You could look into a polyfill for old browsers that don't support background-clip: text; Otherwise you would have to use a different approach, like using SVG or canvas. I didn't look into the support tables to see which approach has the best support. But GSAP can animate those just fine.

 

SVG demo: 

 

 

 

 

Thanks man :  )

[clickdeproduto]

On 6/30/2019 at 3:04 PM, PointC said:

Yeah, JavaScript isn't gonna have any magic way of making the gradient cross-browser. Getting that to work correctly in all browsers could be a bit tricky. @mikel's approach with SVG paths would work well and you should see consistency across the browser spectrum.

 

If you want actual SVG text, you can do that too. You could use <tspan> elements, but animatable properties will be limited. I'd recommend placing each letter in its own <text> element. It's more work to manually do that, but it should work everywhere.

 

 

 

 

If you don't like the manual approach, I made this demo to show how to break strings into SVG <text> elements. It's overkill for what you're doing, but maybe it'll give you some ideas.

 

 

 

 

SVG text animation is not without its caveats though. getBBox() isn't accurate for vertical measuring due to font ascent, descent and the other font metrics, but that's a post for another time.

 

Hopefully that helps a bit. Happy tweening.

 

 

Thanks for the help, I'm going to give you still pride  

[clickdeproduto]

On 6/30/2019 at 1:16 PM, mikel said:

Hi @clickdeproduto,

Hi Zach,

 

To use SVG is super ...

 

 

 

 

Happy tweening ...

Mikel

 

 

 

Good job mikel, thanks for help!