Jump to content
Search Community

How animate a text with gradient

clickdeproduto test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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.
×
×
  • Create New...