SVG Fill in Animations

Hi there.

In the GSAP Animations panel rest an option for changing the fill. I guess this is for SVGs. So I tried to trigger it - but with no success. If I change the fill inside the SVG Bricks element it works well. Also everything else is set up right - as for example the backdrop color of the SVG reacts well.

Do I miss something - could You give this a check?!

Hi there.

Can you confirm this, will it be fixed in the next version?

Works well on my end…cannot find an issue there. How to reproduce this? Can you send me the SVG which you’re running?

Ok. I´ve inserted it as well in the page - just to check if maybe the placement in the header could cause this - but it doesn´t matter.

Seems I can´t attach a SVG here - so could You please download it here :

End of page or second in the header.

For your SVG, you need to fill the polygon. The SVG itself can’t be filled here.

Thx Danielle!

But to be honest - why? :slight_smile: Shouldn´t it be acting like Bricks itself? Also… even with ‘polygon’ the subline is still missing colored…

GSAP needs declarations to be technical correctly. Try to change the fill in the Chrome Developer tools. This won’t work:

Bricks can use CSS to easily include all children. In GSAP / JavaScript, you need to declare for which elements you want to change the property. That’s fine, because sometimes we want to separate.

Also, it depends on the way you create the SVG. As shown above, for the “AI” svg I can fill the svg layer. I am not an SVG vector expert, but I think you can create your SVG the way to save the entire fill in the SVG layer and not in the children shapes :slight_smile:

Thx Daniele! :slight_smile:

Good to know - i´ll rebuild the SVG and remember this for further projects.

1 Like