gradient animatiopn bottom to top

[hrshd]

i want to animate this gradient animate bottom to top and top t bottom.. how to do with gsap library..

thanks in advance

See the Pen yLqOjpo by harshad-patson (@harshad-patson) on CodePen

[mvaneijgen]

Hi @hrshd welcome to the forum! 

 

What have you tried already? On this forum we like to help people learn GSAP, not just give solutions, so if we can see what you've tried already we can see your thought process and thus better help you. 

 

Note: Uses the old GSAP v2 syntax 

 

[hrshd]

sir actually i have already tried to find some effects like it but i couldn't get it.. anywhere. i have added one more effect for demo in circle svg. .. but doents fit into my 1st svg. if you can help me to solve this..like percentage wise animation bottom to up...  10% 20% ..100%

 

Thanks and regards

[Rodrigo]

Hi,

 

You could use a mask or a clip-path in order to show the fill from the bottom using GSAP:

See the Pen poZEoam by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

 

Happy Tweening!

[hrshd]

Super, thank you so much  @Rodrigo   

[hrshd]

Super, thank you so much  @Rodrigo    is it possible in black background in mask??

like 

 <rect x="0" y="0" width="100" height="100" fill="black" id="maskRect" />

[Rodrigo]

Hi,

8 hours ago, hrshd said:

 is it possible in black background in mask??

Sure thing but be aware that the mask effect will look different as it varies depending on the color or gradient you use. I don't know the color theory behind this behaviour, all I know is how it works.

 

You can learn more about it here:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/mask

 

Happy Tweening!