Here’s an old-school item – a virtual flat 3-D animation of objects emerging from a floating oval.
As Hype only supports rectangular masking, you have to fake the oval mask by using a broad oval stroke with the same color as the background. To demonstrate this, I’ve inserted a white background object. Change the color of the background to see how the oval stroke works.
Create the animation by placing the group of white rectangles within another group. Drag the top edge of the outer group to 0 and drag the bottom edge of the outer group to just below the inner edge of the stroked oval. Set the outer group to overflow > hidden.
Take the inner group of rectangles and drag it out of sight just below the bottom edge of the outer group. Set a vertical position keyframe, then move the time cursor to around 4 to 6 seconds and set another vertical position keyframe. Drag the inner group off the top edge of the stage. Make sure the keyframes are set to linear. This is not a must, but if you go for extra credit (below) having the animation run at a fixed rate will make a difference or the offset group will slow down and speed up halfway through.
Give the outer group a name of “Front Group” (or something similar), then duplicate it. Give the duplicate the name "Back Group (or whatever) and move it behind the oval groups.
Select the bottom edge of the front group and slide it up to a position in the center of the oval. Select the top edge of the back group and drag it down to one pixel below the bottom edge of the front group without overlapping.
The offset masks create a slight-of-hand trick by seemingly moving a single group of rectangles from the background to the foreground.
Variation
If you want this to look like it’s emerging from a hole, place a colored oval behind everything and aligned with the stroked oval. Either delete the blurred oval “shadow” or drag the bottom edge upwards so the lower edge is hidden and make it slightly narrower.
Extra Credit:
When the animation runs there is a gap in time when the animated element is off the screen entirely, which can be a little boring. If you really want to give yourself a mental workout, try duplicating the whole thing and offsetting it to double the frequency of the animation. This will have parts of two animations visible simultaneously.
There are two things you will need to figure out for this to work. The first will be that of splitting the duplicated animated element and offsetting one of the copies so that it loops from the halfway point and not from the end. The second will involve which oval elements to keep and which to throw away. (Hint: you will need to shift the animated groups between outer groups. Another method would require instant switching of opacities.)
DoubleMaskAnimation.hype.zip (14.4 KB)