Gradient mask reveal of image, on top of bg image

1

I've read a bunch of posts regarding masking and there's some great ones. I didn't see any that tried to accomplish this same idea, other than some 5+ yo posts.

Is the only way to accomplish this gradient reveal of text (which is actually an image) on top of a non-solid colored background still to manually code with CSS inside Hype?

gradient-reveal
gradient-reveal600×1002 72.8 KB

2

you could use a second instance of the image. put it above the text and animate/mask this ...

3

Do you mean using an svg mask on the topmost photographic layer vs an svg mask on the text (which is an image) layer?

4

mask-image.hype.zip (2.9 MB)
a basic css-property might solve it?

4 Likes
5

That is so cool! :+1:

6

Oh hey this is rad! :astonished: In my particular case, there is no motion of elements, only the reveal of the type. So I moved a few things around in your sample file and voila!
mask-image-no-motion.hype.zip (2.9 MB)

Very smart, @h_classen :nerd_face:

2 Likes
7

for opposite animations aiming a stable state ... my guess is, that linear easing is the best option

2 Likes