Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
clickdeproduto

How animate a text with gradient

Recommended Posts

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

Link to post
Share on other sites

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

Link to post
Share on other sites
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

Link to post
Share on other sites

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?

  • Like 1
Link to post
Share on other sites

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. 

Link to post
Share on other sites

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.

  • Like 2
Link to post
Share on other sites
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.

Link to post
Share on other sites

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

  • Like 3
Link to post
Share on other sites

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.

:)

 

  • Like 3
Link to post
Share on other sites

 

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.

Link to post
Share on other sites
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?

  • Like 2
Link to post
Share on other sites

Sheesh... where have you been @Jonathan?

 

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

  • Haha 3
Link to post
Share on other sites
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. ?

 

  • Like 1
  • Haha 3
Link to post
Share on other sites
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.

Link to post
Share on other sites
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.

Link to post
Share on other sites
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.

Link to post
Share on other sites
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 :  )

Link to post
Share on other sites
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 :) 

Link to post
Share on other sites
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!

Link to post
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.

×