Color fill only the visible part of transparent PNG

[Jonah 2 Likes (Newbie)]

Is there a way to only color fill the visible parts of a transparent png? I feel like this is something I've either done with GSAP or back in the day with AS3, could be mistaken though, it's been awhile. Thanks for any help!

[PointC 8,599 Likes (Superhero)]

Hi Jonah 

 

Welcome to the forums.

 

Blake has a pretty cool pen that I think may help you:

 

See the Pen eJdvMX by osublake (@osublake) on CodePen

 

My other thought would be - do you have the option of using SVG instead of png? If so, a world of possibilities would open up for you.

 

Happy tweening

[Jonah 2 Likes (Newbie)]

Hi Craig, thanks for the reply! I actually stumbled upon using SVGs and found one of GS codepen: 

 

See the Pen gpDrC by GreenSock (@GreenSock) on CodePen

 

The only thing is that SVG is in the mark-up. Is that a requirement or can you also use an external SVG asset? 

[PointC 8,599 Likes (Superhero)]

Yeah - SVG is pretty darn awesome and a lot of fun to animate.

 

You can definitely inject the SVG if you like. We've got a few threads talking about it. Please check out this post:

 

http://greensock.com/forums/topic/11187-accessing-svg-paths-in-external-file/?p=59586

 

[GreenSock 8,117 Likes (Superhero)]

Just a random idea (if you need to use PNG): what if you just put the <img> into a <div> that has a background-color? And obviously size the <div> to exactly the size of your image. That way, the transparent areas would just show through to the background-color. 

[Jonah 2 Likes (Newbie)]

Thanks guys, I ended up using the inject and append method that Craig linked to from another thread. As always, great response and support from Team Greensock. Much appreciated!