Howto: Four Different Masking Techniques

Below are a few of the many ways to mask content in Tumult Hype. Thanks to everyone for sharing their tips!

If I’ve missed any, please comment below.


1 Like

And what about animating the ‘mask’?

  1. Select an item, an image for instance.
  2. Group
  3. Set overflow to Hidden
  4. How to animate only the Group div (the mask) without moving the image within?

Here’s one technique using @MaxZieb’s “Hype ClipPath” method…

In this demo the masks (vectors) change shape as they move over the images.

As to your specific example one would need to animate the image in the opposite direction of the mask movement in the same time duration to appear to not move.

Huuuuh. In Edge Animate there were two different techniques to very simply animate the ‘mask’. One of them was even called ‘Clipping’. Many years later I wonder why it is not possible in Hype Pro.

1 Like

Hype Clippath does just that. The problem was and is Internet Explorer. Clipping is not supported by that browsers. Since, Microsoft now contributes to Chromium browser development and is switching the future is brigther.