Mask Animations

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

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

Related: Animations | Keyframe Editor | Templates