Text Fill Up Gradient Animation

[Gourav Mukhija]

Hi Team,

Is there any greensock example where text gradient fill up animation happen from bottom to top ?

Example:
I am trying to build Text fill up animation where text is having some default color (e.g. Red color Text) and on button click gradient fillup animation start from bottom to top like water is filling from bottom to top (e.g. bottom to top text color change from blue to red)

CodePen: 
Reference Link: (something similar but default text color should be predefined and gradient color on fill up)

Thanks,

See the Pen PoXbbea by Gourav-Makhija (@Gourav-Makhija) on CodePen

[mvaneijgen]

I've stolen this from the amazing course of @Carl's Creativecoding Club (link to lesson if you're a member). Just update the css variables to set the colors.

 

It is not on button click, but that's easily updated. Hope it helps and happy tweening! 

 

See the Pen bGOaYYE?editors=0110 by mvaneijgen (@mvaneijgen) on CodePen

[Gourav Mukhija]

Thanks @mvaneijgen, Actually I am looking something similar

See the Pen DLJKVE by hxd (@hxd) on CodePen

 on scrolltrigger where instead of wave simple gradient color fillup like solution.

 

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer if they'd like - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://greensock.com/st-demos and https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look. 

 

This thread could provide some help as well:

 

[akapowl]

 

Hello @Gourav Mukhija

You've already got a basis for what you plan on doing with the codepen example you provided.

 

In the demo it is animating horizontally from left to right because you have set it up like that. I'm not sure I understand exactly what it is you want, but if you want it to animate vertically instead of horizontally, you can just tweak the values neccessary for it to work that way.

Those are e.g. the rotation of the gradient from 90deg to 0deg and in your CSS as well as the JS the values for background-size and/or position to be appropriately set for it to work vertically instead - the first parameter of those always refers to the horizontal axis and the second to the vertical axis.

 

https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient

I just tinkered about a bit and got it working like I imagine you'd want.
 

Hooking this up to ScrollTrigger the way you imagine, I'll leave up to you though. Good luck and happy tweening.

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger

See the Pen PoXEgNz by akapowl (@akapowl) on CodePen

 

[Gourav Mukhija]

Thanks @akapowl, Yes this is what I am looking for.
 

[Carl]

glad to see you got the help you needed. here are a few additional examples from my GSAP courses that may help with the ScrollTrigger implementation. 

 

 

See the Pen jOVoYXg by snorkltv (@snorkltv) on CodePen

 

See the Pen KKNEYqw?editors=0100 by snorkltv (@snorkltv) on CodePen