My client would like me to animate in a header for a HTML5 banner letter by letter. The font for the header is not a web font, it is Museo Slab, so I have included it as a PNG over the background image. The background image is not a solid color, it is a picture of a person. I thought of having a piece of the background image cover the title and slowly animate it out to give the same effect, but it did not work as well as if you were implementing this idea with a solid color background image.
I am wondering if there is a way to animate in the PNG header image using TweenLite that will give the impression that this PNG appearing letter by letter. Any ideas? The only thing I can think of is saving out a separate PNG for each letter and animating those in one by one, but that will take forever to implement and will increase the overall size of the advertisement. Is there a better way?
Thanks for your help!
You can use sprite image for the letters and change the position of letters using tweenlite.