Can I use a PNG as a mask for this water animation instead of <text> tag?

Question

So I found this amazing codepen animation that animates a "water filling" effect to any text provided via the <text> tag using (GSAP i think)

Codepen Screenshot Below CLICK HERE FOR CODEPEN

My question: How would I go about using a .PNG Image instead of HTML text to achieve the same results?

For example

Instead of the current code: <text id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" font-family="'Cabin Condensed'" font-size="161.047">LOADING</text>

I was looking to do something more along the lines of

<img src="LOADING.png" id="text" transform="matrix(1 0 0 1 -8.0684 116.7852)" width="569" height="186">

Example of Loading .PNG IMG one could use: (same dimensions as <img> snippet above)

Thanks for any help! Not best with this stuff and would love to use the effect!

Here is an SVG of the png file posted above if that works better: imgh.us/loadingpng.svg

Along

How's this different from your last question? – Vermillion

You try to add png image. – Rotter

Oh sorry i thought i deleted that. – Along

I did try adding png image but didnt work.. Can you use PNG's as masks without additional scripts? – Along

Cross browser/device? – Along

why don't you create the desired .png with your favourite graphics editor ? – Thermaesthesia

Well I wana be able to use this effect on multiple png's I provided the loading .png "i.sstatic.net/l78Rj.png" in my description above to give people something to work with. I can create an image png mask no problem. Just not sure how to do it with this setup so I can get same effect. – Along

Ideally id like to be able to just replace the mask image as desired (Maybe height and width attributes if needed) and just apply the effect to whatever png mask I add. – Along

the script works on the fill attribute of the svg text; if you could convert your png to a vector it's really easy to apply this effect.... are you willing to convert it to SVG path? – Thames

Here you go: imgh.us/loadingpng.svg – Along

:3 @Thames forgot to tag you – Along

You too @Thermaesthesia – Along

Agreed, converting the image to an SVG is the way to go. PNG does not have support for animation of any type (afaik). SVG being vector means it is math based, therefore much easier to interface with on the client side. – Bacteriology

@Pheagey I provided a SVG link to work with. Can you help? – Along

@Portal_Zii you just did the hard work already; swap in your SVG and change logic as needed. – Bacteriology

@Pheagey I have tried multiple times. I am not sure how the "logic" works. Which is why I put a 50 Point Bounty on the question and why im still looking for the answer after 4 days.. – Along

@Pheagey I can make SVG's of any image in less then 20 seconds.. Thats the easy part lol – Along

Answer 1

Here's a pen ,

there's a cors problem embedding on codepen from external resource (if you are serving form same domain you can overcome this ... )

but once you have your path inline it's a breeze, just changed the id to text and the script will do it's job.

for adjusting the animation change the TweenMax.fromTo options

Thames

Wow nice! Thanks! So I wana make the text black. But when I do it doesnt show the water effect.. Also for some reason whatever color I set the water effect shows up as "faded" how do i set it to the true colors I need? Heres an example: codepen.io/anon/pen/ONZqgJ – Along

I really wana award you this answer I just cant afford another 50 points to figure out the color issue. Got any ideas? – Along

AFAIK the script set's an overlay of the color specified in pattern#water , if you want your letters black you can remove the fill & stroke color and set pattern#water fill attribute to black, here's an example on the first letter path – Thames

No you are amazing and I will give you this award in a sec regardless of your next comment but had another question. This works amazing and I have pretty much what I need. The last thing I need to figure out is how to make it so the liquid in every other letter is a different color. Any ideas? codepen.io/maio/pen/jqxJZy – Along

The only thing I can think of is making 2 versions and then overlapping them. But that seems messy. – Along

If there was any way to show the color of each path AS the water and then show none water parts black that might work but I have no idea what to do there. – Along

oh says 21 hours till i can award bounty. – Along

the way the script is set up (to simulate water) is that it creates a mask-overlay that "blends" the color of whatever fill inside the letter-path with background(I saw that form your example), if you were to look inside the script you can probably find these settings and modify them - at the moment it creates a single mask .. – Thames

How do I add 2 classes to the same querySelector in the GSAP script? any ideas? – Along

I tried var fill=document.querySelector(".water-fill .water-fill2"); and var fill=document.querySelector(".water-fill").querySelector(".water-fill"); but no luck – Along

Hmm not sure thats what I need. I ended up making the GSAP script a bit sloppy but got my desired effect: codepen.io/anon/pen/aNGMeP – Along

Thanks so much for the help! Ill be sure to award you the bounty once the time limit for it runs out. (less then 24 hours) – Along

Heres a link to my new question if you get bored: #36701761 :) – Along