Jump to content
GreenSock

hrshd

gradient animatiopn bottom to top

Go to solution Solved by Rodrigo,

Recommended Posts

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 

 

  • Like 2
Link to comment
Share on other sites

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

Link to comment
Share on other sites

  • Solution

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!

  • Like 1
  • Thanks 2
Link to comment
Share on other sites

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" />

Link to comment
Share on other sites

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!

  • Thanks 1
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.
×