Leverage the potential of masked animations

If you’re into cool and simple animations, you’re going to love this one.

With the masked animation in Maglr Pro, you can make elements (dis)appear from within their respective frames, and even make them move in a certain direction.

What are masks in web design?

In web design, a mask is like a special 'cut-out' that hides parts of an image, shape, or another type of element, letting only certain areas show through. Imagine having a picture and putting a custom shape on top of it. You can then only see the part of the picture that's inside the shape. It helps to create a cool effect by showing only specific areas of an element.

What are masked animations?

Masked animations mask the elements inside the element’s or group’s frame. The animation will then make the element appear from a desired direction, keeping the animation contained exclusively within the frame itself. This allows you to create moving overlays, without having to make the elements come flying into the page entirely.

Masked animation examples

Masked animations can be used for various purposes, such as custom buttons, hero animations and image showcases. With the examples below, we aim to inspire you to one-up your creativity with this animation type.

Image showcase

In the design above, a group has been created containing several elements. Every seperate element has been given a specific masked animation, allowing the elements to come into view. And through the added delays, the elements come into view at irregular intervals.

The ‘start animation’ triggers whenever the element comes into view. This happens both through the ‘timeline’ that starts running upon loading the page, but also when the element is enabled through hover and/or click actions. The ‘end animation’ is also triggered by the click action that has been applied to the button.

Note: in order to show the ending animation, you also need to apply an ending animation to the overlying group.

Custom animated button

The design above contains 3 groups:

• One for the default state of the button
• One for the hover-state of the button
• One to group both of these states together and apply the hover-action to

Both the default & hover groups contain two elements, both of which have received their own masked animations. The overlying groups (Btn-hover & Btn-default) have been given a regular fade animation in order to trigger the animations for the elements inside of them.

How are you going to use masked animations?

The above animations are just a few examples of how you can utilise masked animations in Maglr to spice up your interactive designs.

We’re looking forward to see your creations! Share them with us via info@maglr.com