Masking of HTML text

Animation
1

Hi

I have a problem with masking and wanted to ask for input. I have a text object that I want to be a regular text because I need it to be dynamic, so I can change it.
Furthermore, I need the text to be revealed by an animation like int the GIF below. The optimal would be to do the reveal with an image like the top animation.
The lower one is easily done by putting it in a group and set overflow hidden on the group and then animate that.
BUT that only works for a reveal that is directed top down, if I do the reverse the text moves when run.
There are several ways of doing masking in HTML/CSS but I can't find a good solution in HYPE. (or in normal HTML/CSS)

maskinggalore

PLEASE HELP! :slight_smile:
/Olle

Asset used for masking with image:

pattern
pattern680×926 117 KB

2

The different types of masking in CSS, SVG and HTML are nicely summed up here:

As most of them will not work for you, you could use something like
https://www.w3schools.com/graphics/canvas_text.asp

And write your text into a canvas you then used to generate an image.
Then you can use your CSS Mask approach. Just one idea… You can also use something like html2canvas to convert HTML to a canvas, but that will add the full "weight" of that particular library to your project. Not sure if that approach is the best but it is one answer :wink: .

--

Another method would be to have the text in an SVG and play around with a composite filter

1 Like
3

Thanks for the answer! I'll have a look at your suggestions.
BTW, I found your HypeClipPath lib and that solved the shape/vector thing.
Thanks for that one :slight_smile:

/Olle