Animating from a fill color to a gradient fill

[shMattyP93 4 Likes (Newbie)]

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

[PointC 14,185 Likes (Superhero)]

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.

 

[elegantseagulls 1,409 Likes (Superhero)]

Great approach tweening the stop-color, @PointC!

 

Welcome @shMattyP93!

 

Another way to try would be to tween the offset attr:

 

See the Pen gBVEOM?editors=1010 by elegantseagulls (@elegantseagulls) on CodePen

 

[PointC 14,185 Likes (Superhero)]

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.

[PointC 14,185 Likes (Superhero)]

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.

 

[shMattyP93 4 Likes (Newbie)]

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!

[PointC 14,185 Likes (Superhero)]

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.

 

[PointC 14,185 Likes (Superhero)]

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.

 

[shMattyP93 4 Likes (Newbie)]

@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.