In Adobe animate there is an option to use layer masks and it calls Upton the canvas to do so. Is there any way to do this in Hype? I’m having a lot of issues in Animate and would prefer to use Hype but the client really wants to be able to use an image to mask another image for animation. I’ve looked into the simple masks I can make in Hype but I need to be able to use an image for the mask.
Thank you
In the upcoming Hype 4 you can mask an image with an SVG path. Basically using it as a image fill. But it’s just inside the shape (not a true alpha mask) and hasn’t got much tweaking capabilities. So the answer is no! …specially with an image alpha channel masking another image. You can resort to some programming etc. but your looking for support in the App I am guessing.
Thanks for the reply. If I could create an SVG mask now that would be great. Any chance I can hop on the beta testing? Or any programing tricks to get hype 3 to do a mask with some sort of path?
You can apply here for the Beta: https://forms.gle/ccTWiFyapMQM6i4P7
Do you have an example of a mask you’d like to recreate?
Yes attached. Basically I need the sunglasses shape to move across the screen and the background landscape would only be visible inside the shape. So we see the landscape through the shape as it moves left to right. Thank you for any advice or tips. Been stuck trying to figure this out for a while.
sample.hype.zip (745.5 KB)
Seems like you need to start with transparency in the shape of the shades:
sample.hype 2.zip (704.7 KB)
Thanks for your reply. I should have been more specific. The end game is that there is a black and white image below the colored image- so the sunglasses are actually revealing the color.
Your solution is great for a solid background though.
You might find the following useful as a starting point:
css_clipPath (Hans) JHS v3.hype.zip (160.3 KB)
The Hype file above is adapted from an example by @h_classen from this thread.
Hans’ original file: css_clipPath.hype.zip (1.1 MB)
These examples utilize CSS - and show the general concept of a B&W background with a “color reveal” overlay. I’ve added a small blur to the B&W image too… thought that would help make the point even clearer. 
You will need to use vectors as CSS can not create your sunglasses shape. I do not have enough time to experiment with the vectors but here are two links that go over this topic. Hopefully this info will help get You to a solution.
This is extremely helpful, thank you. I will try to work with it the best I can.
Is there anyway I can create the circle on the timeline and animate it while having the css code make it the mask? Currently the circle is created in the code and attached to the mouse. If anyone can direct me to a starting point of having the circle on the timeline so I can animate it by hand, while having the code in the background render it as a mask when it is previewed in the browser, that would be so helpful!
Until then I’ll be chugging away at it myself
Thank you!
i would say there might be a nice way in Hype 4 (or Beta) to script/control the fill-pattern of a vectorshape … i’ll try this evening …
this follows an approach of @MaxZieb, will work … just a test
Thank You Hans 
for the example of working with the MutationObserver.
