Clipping mask

Animated, dynamically created, matte mask

The matte mask is great, but all browsers other than Chrome really struggle with the animation. So a different approach is required.

First we draw a matte in a temporary canvas, this is used as the clipping path.
Next, the image-to-be-masked is loaded and referenced for redrawing.

Animation is acheived by redrawing the matte with a variable vertical offset.