In this article I’m going to share three ways to use masks in Atomic to make marked improvements to your animations.

Let’s get started

Most often containers are used to mask static images or create scrolling areas, but there is a lot more you can do with them.

All the examples in this article have one thing in common: they all use a container as a mask. At it’s simplest, a mask is a kind of ‘group’, which hides a selected portion of the element/group.

To create a container mask, select the elements on the canvas which you’d like to put into a container, then click on the Mask button at the top of the editor.

In the layers panel, you’ll see the elements you had selected are now inside a new container. You can select and move elements around within the mask and you can adjust the edges of the mask to clip more or less of the content within.

Container masks in animation

When you are creating transitions in Atomic, any changes you make to your container, or the positioning of elements inside it, will animate during a transition. This means you can think of container masks as little mini floating canvases inside your main canvas.

Note: as with all transitions, the container and its contents need to exist on both pages of your transition.

---

One: A beautiful counter

See this prototype live in Atomic here

In this example the container has a white background fill, slightly rounded corners and inside it are the heart, and the numbers. In the first page, the number 3 is positioned outside of the mask, so it is hidden. On page two, the number 2 and 3 have both been moved down and now the number 2 is out of view.

Here’s a behind-the-scenes view of the first page in this animation:

---

Two: An interesting button

See this prototype live in Atomic here

In this example, like the previous one, the button itself is made from a container. Inside the container I’ve put an interesting shape and positioned it out of view in page one. During the transition the green shape is moved into view in a way that makes the transition from white to green a little more eye catching. If you’re looking for a way to provide stronger visual feedback in response to a button click, this might be a suitable technique for you.

Here’s how it looks behind scenes on page one of the prototype. As you can see, the green image within the container is knocked back to 30% opacity and positioned out of view on page one:

---

Three: A round mask

See this prototype live in Atomic here

In this example, I have added one small line of Custom CSS border-radius:50% which has transformed my container mask into circle. Now any content within the container also is clipped into a circle. I first used this method when exploring an idea for the round-screen Moto360 watch.

Here’s how it looks behind the scenes:

So that’s it!

All these examples were created in this single prototype, which you can Copy & Edit into your own account to go behind the scenes. Got questions? Type ? from inside the editor to chat with us, or hit us up on Twitter.

–

Not using Atomic yet? It’s free to try, register here.