Animating SVG logo fill

[RyRInfo]

Hello, I want to make a loading with this logo.

The effect I want is to fill it with a black background (as if it were water).

 

See the Pen QYJVrP by rodrigo-vassia (@rodrigo-vassia) on CodePen.

 

 

Can someone help me?

See the Pen QYJVrP by rodrigo-vassia (@rodrigo-vassia) on CodePen.

[GreenSock]

Welcome to the forums, @RyRInfo. 

 

That'd probably be best to do with a mask or clipping path. Let us know if you have any GSAP-specific questions and we'd be happy to help with those. 

 

Good luck with your project.

[Shaun Gorneau]

@RyRInfo, have a look here to see how I tween a span behind an SVG to look fluid like.

 

See the Pen AXYRwj by sgorneau (@sgorneau) on CodePen.

 

A few notes ...

 

The "fill" is actually a span with a background color that is showing through the SVG and I'm tweening that span. This is all inside of a div with a border and border radius with overflow:hidden to mask any of the span outside of the circle. You could so something similar by leaving the R&R letter fill transparent in your SGV, but actually leave the area outside of the letters white to "mask" the span. I put mask in quotes because it's not an SVG <mask>. That is also another option ... explained here.

 

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

 

Also note that the amount of the tween is based off of a data-completion attribute on each wrapping div ... so a bit of the JS is just calculating how much to tween the span.

 

I just find making a knocked out SVG and stuffing it into a DIV with overflow hidden an easier way to do these things. Here is a simple CodePen showing that.

 

See the Pen vbQvMR by sgorneau (@sgorneau) on CodePen.

 

Hope this helps!

 

EDIT: Did the SG for my initials ... it's not of mixup of GreenSock initials

[GreenSock]

Nice work, Shaun!

[RyRInfo]

Thank you very much, that's what I needed!! ?

[Shaun Gorneau]

Great! Happy to help!

[PointC]

I'm a little late to the party, but I'll throw out another possibility in addition to the excellent advice offered above. You can fill any element by animating a gradient stop offset. 

 

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

Happy tweening.

 

[RyRInfo]

Good job!!

[hadiqa]

Hi, Can anyone please help me do this fill animation on a button ? it starts from the bottom left of the button and fills the whole button on hover. 

[Rodrigo]

Hi @hadiqa,

 

What have you tried? Do you have a minimal demo that clearly illustrates the issue you're having or where you're getting stuck?

 

Happy Tweening!