Alight Motion is the perfect tool for many a wide variety of animations. By the end of this article, we will have created an animated cloud with two little gusts of wind. Both the cloud and the little gusts will move back and forth with a simple repeated blowing animation. For this project, we don’t need any external assets. Everything will be made in Alight Motion itself. Please download the app if you have not done so already.

Note that this will be updated with video and images when possible.

Downloads

If you’d rather follow along with a finished project, import the project into Alight Motion with the link below.

Completed Element Link: http://alight.link/GAf1P2zcZ6hxKrWn6

Alight Motion Basics

Alight Motion is unlike other editors on mobile in that it is focused on motion graphics and animation. It’s very easy to create captivating graphics for your video or animation project in a short period of time. Let’s take a short tour through Alight Motion, to better understand what is possible.

Upon opening the app, we’re presented with the feed, which contains news and information from Alight Creative and our users. At the top of the screen, we can see two more tabs, Projects and Elements. A project is a place to arrange content to create video, image sequences or animated gifs, similar to Premiere Pro or most other editors. For our cloud however, we’ll be creating an element, which is a piece of reusable content that can be used in Alight Motion projects. Let’s swipe right to Elements and tap + to enter the element creation dialogue. Let’s name our element “Cloud” and choose a 1:1 aspect ratio. I recommend choosing a resolution of 1080p, and a frame rate of 30fps, but you can change this to suit your needs, based on your device.

After tapping create, we are presented the Alight Motion interface. At the very top we can see the name of the project, as well as icons for Settings, Export, and More Options. Below this is the Preview, where you can see your animation change in real time. Below this we can see icons for functions frequently used in editing. From the left they are Undo, Redo, Move to Beginning, Play/Pause, Move to End, Bookmark, and Loop Preview. Finally, below this is the Timeline. The time of the current visible frame is denoted by the vertical white line called the Playhead. The Timeline is populated with layers, higher layers cover lower ones in the preview. The tabs on the left of the timeline are selection tabs for each layer. Tap them or the layer itself to view the Editing Panel for the layer, where you can alter and animate the layer. Tap them and hold until they’re highlighted and then tap other layers to multi-select layers.

Take a minute to familiarize yourself with the basic layout of Alight Motion. When ready, we’ll work on creating our cloud!

Creating Our Cloud

In our article on making your own weather forecast, we used an animated icon to show cloudy and windy weather. The cloud is made of two circles on either side joined by a rectangle, with a larger circle sticking out the top. It has a circle to provide a crescent shaped accent within the cloud. The gusts will be an open circle with a small thin rectangle behind them. We’re going to create this cloud and gust now!

Let’s start Tap +, Shape and then add a circle. Let’s make it a little bigger and drag it on the Preview to the left. We’re going to leave this, and every other layer, at the default two seconds in length. Tap Color & Fill to change the color to white. When satisfied, with the circle layer selected, tap the three vertical dots on the top right, and choose Duplicate Layer. If the layer is not selected, you can tap the circle in the preview, or the layer in the timeline to select it. This will make an identical circle on top of the original one that may not be easily visible at first.

Tap on the circle in the preview and drag it a bit to the right, making sure it’s aligned vertically with the other circle. These will be the bottom left and right of the clouds. Let’s now create a larger circle to go in the middle. This central circle should not stretch lower than the other two circles, but it should reach both of them to give a fluffy bouncy shape. Finally, we can make a rectangle to align to the bottom of the two original circles, and we have our basic cloud shape!

To make our accent, let’s tap on the leftmost circle, and then tap the three vertical dots on the top right and choose Duplicate layer. With the new circle selected, tap Color & Fill to change the color of it to blue, and move it a bit to the right. Then tap the vertical three dots and Duplicate Layer. Change this layer to white with Color & Fill, and move it to the right. This should make a pleasing crescent highlight in the cloud. You may need to adjust your other shapes to align correctly with the crescent. In this case, multi-select the circles used to make the streak and then tap Group on the top right to make sure they don’t accidentally get moved out of position.

After this, use multi-select again to Group all layers in the cloud, and now you have a cloud layer!

Now, let’s make two little gusts of wind. We’ll make one and duplicate it. First, let’s create a circle like before. We’ll make it a bit smaller and place it on the lower right. Let’s use Border & Shadow to turn on Stroke, set the color to white, and make it a bit thicker so we can see it easily. Then let’s go to Color & Fill and set the fill to nothing. Now, let’s add another shape, the Wide Line. Use the circular handles to position it so it trails behind the circle. Then use the square handle to adjust the thickness of the line to match that of the circle. When finished, group the two layers, and we have our gust of wind. You can then select the layer, tap on the three vertical dots on the top right and select Duplicate Layer to create a second one.

Making Our Cloud Move

Let’s animate our cloud and gusts to make them really represent a cloudy and windy day. Let’s start with the cloud. Tap the cloud layer to select it, and then tap Move & Transform. On this panel, we can animate the cloud by repositioning, rotating, scaling, and skewing it. For now, we’re just going to move the cloud left and right, to make it look like the wind is blowing sideways across the preview.

Let’s move the timeline to 0:00. In the Move & Transform panel, make sure that Position, the icons with the four arrows, is selected. Tap Add Keyframe to add a keyframe at that point. Keyframes fix a value of a certain property at a certain time on the timeline. Let’s scroll the timeline forward to 0:15, and then use the control pad (not the preview!) to move the cloud a bit to the left. A keyframe will appear at 0:15. Now, when we scroll back and forth between these two keyframes we can see the cloud move. By default, values change linearly between keyframes, and so we’re seeing linear motion here. Let’s move the timeline to 1:00 and then move the cloud farther to the right, and finally, let’s move the timeline to 2:00 to move the cloud back to its original position. We now have a two second loop. Let’s play it back to see!

At this point the animation may not look natural. Normally, when things are in motion, they tend to slow down before making any changes in direction. To do this, move the timeline to around 0:07 or anywhere between the first two keyframes and then tap Easing on the lower left. When between two keyframes, we will see an easing curve. We want something that eases in and out, so let’s choose bottom right option. This circle will start slow, speed up, and then slow again. Move the playhead to change every curve in the layer to this. Playback the animation and you’ll see that the cloud moves much more naturally.

Now, let’s do the same for the two gusts of wind. Let’s make the timings on them slightly different so that they move more independently.

You should now have your cloud and gusts move and loop correctly! Right now you could use this in any other project, but only for instances that are two seconds long. Let’s make this reusable for any duration on the timeline!

Finalizing Your Element

To make your cloud usable for any duration, we need to do two things. First, move the playhead to 0:00, and then, without any layers selected, tap Settings on the top right of the screen and select “Mark end of intro”. Move the playhead to 2:00 (the end of the element) and then tap Settings and then “Mark start of outro”. Finally, in Settings, change Re-timing to “Loop”, and we’re done.

Marking the end of the intro and the beginning of the outro declares that everything within those two marks is the main part of the layer, and it should behave according the value of Re-timing, if the layer changes in duration. Since we designed out cloud to be able to loop from beginning to end, we don’t have an intro or an outro, which is why we put the marks at either end. (See our article on animated lower thirds to learn more about how re-timing works.)

With this we’re finished! We can use this element in any project by tapping + in the project, and then selecting Elements, and then choosing this from the list. Since we set it to loop, we can use it for any duration we’d like.