Mask Animations

Create professional reveal effects using animated masks. Masks clip content and can animate to reveal items over time - perfect for title sequences, transitions, and cinematic effects.

Available Mask Animations

Using Mask Templates

The easiest way to use mask animations is through templates:

1. Open the Templates Panel (click Templates tab or press T)
2. Filter by Category: Masking
3. Click a template to preview it
4. Click Use Template to apply it

Available Masking Templates

How Mask Animations Work

Animated masks work by clipping content with a shape that changes over time:

1. Mask Shape - The clip boundary (rectangle, circle, star, heart)
2. Animation Type - How the mask moves (wipe, iris, scale)
3. Timing - Start time, duration, and easing
4. Direction - Which way the reveal happens

Timing Parameters

• Start Time - When the reveal begins (in seconds)
• Duration - How long the reveal takes
• Easing - Animation curve (linear, easeIn, easeOut, easeInOut)

Staggered Text Reveals

For multi-line text, stagger the start times for a cascading effect:

This creates the classic “line-by-line reveal” seen in professional motion graphics.

Combining with Other Effects

Mask animations work well with:

• Keyframe animations - Move items while they reveal
• Simple animations - Add pulse or fade after reveal
• Background generators - Reveal content over animated backgrounds

Image Masking (Static)

For static shape masking on images:

1. Select an imported image
2. In the Properties Panel, click Mask
3. Choose a shape (circle, star, heart, hexagon, etc.)
4. Adjust the mask size and position
5. Click Apply Mask

This creates a permanent crop to the shape (not animated).

Tips for Best Results

1. Keep reveals short - 0.4-0.8 seconds works best
2. Use easeOut - Feels more natural for reveals
3. Stagger consistently - 0.1-0.2s between lines
4. Match your content - Use iris for dramatic, wipe for professional
5. Preview at full speed - Test timing feels right

Mask Modes

Control how the mask shape interacts with your content:

To change the mask mode:

1. Select the masked item
2. In the Properties panel, find the mask mode dropdown
3. Choose Clip, Subtract, or Intersect

Mask Stacking

Apply multiple masks to a single item for complex masking effects:

1. Apply an initial mask (e.g., circle)
2. Add a second mask layer with a different mode:
   • Add - Unites both mask shapes (visible in either)
   • Subtract - Cuts the second shape out of the first
   • Intersect - Only the overlapping area is visible

Example: Circle with Star Cutout

1. Apply a circle mask (clip mode)
2. Add a star mask layer (subtract mode)
3. Result: circular frame with a star-shaped hole in the center

You can stack as many mask layers as needed. Remove individual layers without affecting others.

Vertex Animation

Animate the mask shape itself by morphing its vertices between two states:

1. Define the starting mask shape (vertex positions)
2. Define the ending mask shape (vertex positions)
3. The mask smoothly morphs between shapes during playback

This creates organic, flowing mask transitions that go beyond simple scale and position animations.

Technical Notes

• Masks use Paper.js clipped groups internally
• Scale-based masks (star, heart) scale from center
• Rectangle masks change dimensions for wipe effects
• Masks are rebuilt when loading templates
• For full programmatic control, see the API documentation for applyCustomMask()

Related: Animations | Keyframe Editor | Templates