Search code examples
jquerycssanimationgsap

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

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 Screenshot of Codepen Waterfill Animation Effect 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) enter image description here

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

Solution

  • 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