By the end of this article, we will have made a quick circle wipe transition between two scenes. The circle will start small from the left of the screen, proceed to the point we want to focus in on, and then grow in size until the transition is complete. We’ll be using two images (though you can use video as well), a circle, and masking groups to achieve this effect.
Note that this will be updated with video and images when possible.
If you’d like to follow along, you should have Alight Motion installed on your device and download the seminar assets.
Image 1: http://j.mp/2EzEw8h
Image 2: http://j.mp/2X8XASe
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/DmLZQhACGyj4cwVr9
Move & Transform and the Controlpad
Making this transition is simple. We’re going to add two images to the timeline by tapping +, then Media, and then by choosing them in the media browser, one at a time. We’ll leave them both starting at the beginning of the project and at the default length. When we add each image, let’s pinch/zoom on the preview to fill the screen and place the faces roughly in the same place for each image. That will look nice in our transition! Then we’ll add a circle by tapping +, then Shape, then by choosing the circle. Once we have our items on the timeline, we need to move and animate them! For this we’ll use Move & Transform, which can be found on the bottom left of the editing panel.
Figure 1: Move & Transform Controlpad
Move & Transform lets you animate a layer’s position, size, angle of rotation, and skew over time using keyframes and easing curves. It’s a very powerful tool for animation, and in fact, it’s the only tool we need to make our wipe.
Let’s start animating by controlling the position of our circle.
Keyframing & The Timeline
Just to review, we’re planning on having our circle come in from the left, stop on the woman’s face, then expanding to reveal the other photo of the woman underneath. Eventually our circle will be see-through, showing the layer underneath, but first, we need to make our circle move and expand.
By default, images and shapes are two seconds long in Alight Motion, so let’s use the first second to travel from off screen to the face, then next second to expand to fill the screen. Let’s swipe left on the timeline to move the playhead to 1:00 in preparation.
Now, let’s tap our Circle, then move it over the woman’s face, the focal point of the wipe. Let’s tap Move & Transform, tap Position on the right if it is not highlighted, and then Add Keyframe to lock our circle into that position at that time. Our focal point has now been set.
Swipe right on the timeline to move to 0:00, the beginning of the timeline. Using the controlpad in Move & Transform, move the circle to the left, off the screen. The red line that appears will keep your motion level. As you move, notice that a keyframe as appeared on your circle layer. If you press play now, you can see your circle move from off screen to the focal point of the wipe.
Please note that you must use the controlpad in Move & Transform to create animations. Moving an object on the preview will move it relative to its entire animation.
Let’s move our timeline now to 2:00 by swiping on the timeline. Again, let’s go to Move & Transform, but this time, let’s tap on Scale and swipe the slider until the circle completely fills the screen. We now have our transition motion worked out. Let’s make out circle into a viewport to our other image with Masking Groups.
Let’s spice up our circle a bit more by applying easing curves to our motion to make it look more natural. Let’s tap on our circle and open up Move & Transform again.
Let’s tap Position, move the playhead so that it falls between our two position keyframes and then press Easing. You’ll see a chart that has a straight diagonal line in it. If you do not see any line at all, make sure the playhead is between both position keyframes.
Right now, the motion of the circle over time is linear, but usually when objects in motion change trajectory they tend to slow down. Let’s choose the third easing curve and drag the top right white handle to the left and down a bit. With this curve, the circle will start quickly and then slow down as it approaches the focal point.
We can do the same for when the circle expands as well. Use the back arrow to leave the Easing panel, and then tap Scale, and then move the playhead between the scale keyframes. Tap Easing, and let’s choose the second curve. The circle should start growing slowly, and then speed up over time.
Let’s play this through. The circle’s motion should feel far more natural.
A masking group takes two layers and masks the shape of the first layer onto the second layer. Anything directly underneath the shape of the first layer will be rendered as visible. Anything else will be transparent.
On the timeline, let’s tap and hold the tab on the left of the circle layer and wait until it highlights. We’ve now enabled multi selection. Tap on the tab for the layer beneath the circle and we’ll have two layers highlighted.
Next, tap the three vertical dots on the top right of the screen and then choose Masking group. Your circle will disappear, to be replaced with the image beneath. You now have a circle wipe!