Create effects and animations with masks

Masks allow you to create dynamic visual effects and smooth transitions for your images and interactive content.

What is a mask?

A mask acts as a window that controls which part of an image is visible. Unlike cropping, the content behind the mask can be animated and progressively revealed.

To learn how to create a mask, check out our article on Images.

Mask effects and animations

By combining masks and states, you can create various effects.

The variety of effects comes from manipulating the mask size (expand, crop, etc.) or adjusting the size of the image behind it (zoom in, zoom out, etc.).

Expand effect

📌 Principle: The image appears to gradually enlarge by increasing the mask size.

Use cases:

• A panel that opens when clicked
• An interactive map expanding on hover
• A fan menu effect

How to create this dynamic expansion effect?

1. Define a mask initially set to a small size
2. Create a new state linked to the first state
3. In this state, expand the mask size
4. Add an action to switch between states to gradually reveal more content
5. Use the Duration setting to refine the animation

Zoom in / zoom out effect

📌 Principle: Create an animation effect by changing the image size.

Use cases:

• An image slowly zooming in to reveal details
• An interactive button that enlarges on hover before returning to its original size

How to create this zoom in-out effect?

1. Use a multi-state component
2. Define a mask
3. Create a new state linked to the first state
4. In this state, increase the size of the image behind the mask for a zoom-in effect. Decrease the size for a zoom-out effect.
5. Add an action to switch between states to gradually reveal more content
6. Use the Duration setting to refine the animation

Progressive reveal effect

📌 Principle: Gradually reveal an element by adjusting the position or size of the mask.

Use cases:

• A text appearing line by line
• An image revealing from bottom to top like a curtain rising

How to create this progressive reveal effect?

1. Create a mask and position the image/text outside its visible area
2. Create a new state linked to the first state
3. In this state, expand the mask size to reveal all content
4. Add an action to switch between states to gradually reveal more content
5. Use the Duration setting to refine the animation

Animated cut effect

📌 Principle: Make an image or text appear through an animated shape.

Use cases:

• A title appearing as if “cut out” by a circular shape
• An image progressively revealed through a moving outline

How to create this animated cut effect?

1. Create a mask and position the image at its initial location
2. Create a new state linked to the first state
3. In this state, move the image without modifying the mask
4. Add an action to switch between states to gradually reveal more content
5. Use the Duration setting to refine the animation