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

Question

So, I found this awesome cosephan animation that animates the “water fill” effect for any text provided using the <text> tag using (like GSAP)

Codepen Screenshot Below CLICK HERE FOR CODEPEN

My question is: How can I use a .PNG image instead of HTML text to achieve the same results?

for instance

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

I wanted to do something more line by line

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

An example .PNG IMG download can be used: (the same sizes as the <img> snapshot above)

Thanks for any help! Not best with this material and would like to use the effect!

Below is the SVG file of the png file, if that works better: imgh.us/loadingpng.svg p>

Answer 1

Here pen

there is a nesting of cors-problems in codepen from an external resource (if you are serving the same domain, you can overcome this ...)

but as soon as you have your own path, make it simple, just change the id to text , and the script will do the job.

to tweak the animation, change TweenMax.fromTo