Jump to content
GreenSock

shMattyP93

Animating from a fill color to a gradient fill

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

Is there a way that I can code an animation that animates a black fill color of an svg to fade into a gradient? Basically when the black circle enlarges and fills the screen, instead of the word becoming white I would like to fill it with a gradient across the entire word. Any ideas?

See the Pen oaKJqo by matt-pichola (@matt-pichola) on CodePen

Link to comment
Share on other sites

Hi @shMattyP93 :)

 

Welcome to the forum.

 

This is an answer from another thread, but it should show you the basic technique of one way to do it..

 

See the Pen bMxqYR by PointC (@PointC) on CodePen

 

You could also do it with a mask or clip-path.

 

Happy tweening.

:)

 

  • Like 7
Link to comment
Share on other sites

Great idea @elegantseagulls :)

 

Last summer someone asked about filling an SVG from the bottom and the offset is a great way to do that. 

 

See the Pen xJOrWG by PointC (@PointC) on CodePen

 

That is definitely a flexible technique that allows you to fill SVG objects at any angle without using a mask or clip path.

  • Like 4
Link to comment
Share on other sites

BTW @elegantseagulls I've noticed how much you've been jumping in and participating around here. I think that's fantastic. The forum always benefits from additional ideas and fresh eyes on projects. Keep up the good work. :)

 

  • Like 7
Link to comment
Share on other sites

So from my understanding, somewhere in the HTML I need to call the gradient that I will eventually fade into? Thank you all for your help and responses!

  • Like 1
Link to comment
Share on other sites

Yep - no matter what method you choose to do this ( stopColor, offset, mask or clip-path), you'll need to have the gradient in your HTML with the SVG.

 

Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

I just re-read your question and if the circle expansion should transition the text from solid to gradient, a clip-path might be a bit easier here. For that you'd just use two versions of the text and animate the clip-path circle and regular circle together. Something like this.

 

See the Pen dQopwX by PointC (@PointC) on CodePen

Happy tweening.

:)

 

  • Like 3
Link to comment
Share on other sites

@PointC Thank you so much! Going to try and implement this now, really appreciate all the help here, still just learning this Greensock stuff so this has been very helpful.

  • Like 2
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.
×