Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Jonah

Color fill only the visible part of transparent PNG

Go to solution Solved by PointC,

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 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!

Link to post
Share on other sites

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

:)

  • Like 1
Link to post
Share on other sites

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? 

Link to post
Share on other sites

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. 

  • Like 3
Link to post
Share on other sites

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! 

  • Like 2
Link to post
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.

×