small_Fcsqb5pWQAAzPIK.jpeg

thumbnail_Fcsqb5pWQAAzPIK.jpeg

Adobe acquires Figma, cue the memes 🤪

large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

<div>
<img src="/assets/images/uploads/masks-hero.gif" alt="masks-hero.gif">
In this article I&rsquo;m going to share three ways to use masks in Atomic to make marked improvements to your animations.
<h2 id="lets-get-started">Let&rsquo;s get started</h2>
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&rsquo;s simplest, a mask is a kind of &lsquo;group&rsquo;, which hides a selected portion of the element/group.
To create a container mask, select the elements on the canvas which you&rsquo;d like to put into a container, then click on the Mask button at the top of the editor.
<img src="/assets/images/uploads/masks-make.gif" alt="Making a container mask in Atomic">
In the layers panel, you&rsquo;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.
<h2 id="container-masks-in-animation">Container masks in animation</h2>
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.
<hr>
<h2 id="one-a-beautiful-counter">One: A beautiful counter</h2>
<img src="/assets/images/uploads/masks-1-1.gif" alt="masks-1-1.gif">
<a href="https://app.atomic.io/d/byAFVRbJMubh">See this prototype live in Atomic here</a>
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&rsquo;s a behind-the-scenes view of the first page in this animation:
<img src="/assets/images/uploads/masks-1-2.gif" alt="masks-1-2.gif">
<hr>
<h2 id="two-an-interesting-button">Two: An interesting button</h2>
<img src="/assets/images/uploads/masks-2-1.gif" alt="masks-2-1.gif">
<a href="https://app.atomic.io/d/byAFVRbJMubh?page=f6ea382d-1cef-4ad7-939c-73b7f3055817">See this prototype live in Atomic here</a>
In this example, like the previous one, the button itself is made from a container. Inside the container I&rsquo;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&rsquo;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&rsquo;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:
<img src="/assets/images/uploads/masks-2-2.gif" alt="masks-2-2.gif">
<hr>
<h2 id="three-a-round-mask">Three: A round mask</h2>
<img src="/assets/images/uploads/masks-3-1.gif" alt="masks-3-1.gif">
<a href="https://app.atomic.io/d/byAFVRbJMubh?page=3f29874c-6598-4233-a7f0-b4311e56f599">See this prototype live in Atomic here</a>
In this example, I have added one small line of Custom CSS <code class="highlighter-rouge">border-radius:50%</code> 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&rsquo;s how it looks behind the scenes:
<img src="/assets/images/uploads/masks-3-2.gif" alt="masks-3-2.gif">
So that&rsquo;s it!
All these examples were created in <a href="https://app.atomic.io/d/byAFVRbJMubh">this single prototype</a>, which you can Copy &amp; 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 <a href="https://twitter.com/we_are_atomic">Twitter</a>.
&ndash;
Not using Atomic yet? It&rsquo;s free to try, <a href="http://atomic.io/#register">register here</a>.
</div>

Using Masks in Animation

Using Masks in Animation

Let’s get started

Top Stories