In the last Motion 5 tutorial, we added the company name to our craft product logo reveal and animated the fade in animation with Keyframes on the Timeline. Now we will add the masking technique that will reveal the second part of the company name.

1. Open the project in Motion^R. You should have two layers named Name and BG and the text on the Timeline. In the Name layer, we have the first and second parts of the company name, “dC” and “ipollo Designs” respectively.
   
   The fade in animation that we created previously lasted 1 second. So we will begin the slide in animation for the second part of the company name, which uses the masking technique, at 1 second on the Timeline. Our first step is to move the text into position for the beginning of the animation and create the mask that will hide the text for that one second as the "dC" fades onto the Canvas.
   
   
2. With the Playhead at 1 second on the Timeline, so that you can see the "dC", move the text to the left until the right edge of the text matches the right edge of the "dC" (the first part of the company name).
   
   We will create the mask from a simple rectangle shape.
   
   
3. Move the Playhead to the beginning of the Timeline. Select the Name layer in the Layers pane and draw a rectangle on the Canvas from the left edge of the Canvas to the right edge of the text.
   
   
4. Select the second part of the company name in the Layers pane, right click and choose Add Image Mask.
   
   You will see that the Image Mask tab is displayed in the Inspector. Notice the Mask Source well (black space) at the top of the pane.
   
   
5. With the Image Mask layer selected in the Layers pane, open the Image Mask tab if needed. Select the Rectangle layer and drag it to the Mask Source well to set the rectangle shape as the mask for the text. When you see the arrow appear over the Mask Source well, release your mouse button to drop the rectangle in to the well.
   
   At this point, we don’t see the rectangle and we do see the text. Let’s make the text disappear.
   
   
6. In the Image Mask tab, check the box for Invert Mask.
   
   Now we don’t see any text because the Playhead is at the beginning of the Timeline and the first part of the company name (dC) is invisible. In the Layers pane, lock all of the layers in the Name group except the second part of the company name.
   
   We want the animation that will move the text into place to last four seconds, so it will end at 5 seconds on the Timeline. We will use the Record feature to set the beginning and ending position for the text for this animation.
   
   
7. Click the Record button. Move the Playhead to the 5 second spot on the Timeline and drag the text to the right of the "dC", creating the complete company name on the Canvas. Click the Record button to stop recording.
   
   At this point, the beginning Keyframe for the masked animation is at the beginning of the Timeline (frame 1) but we want it to be at the 1 second spot. We can easily move the left Keyframe into the correct position on the Timeline.
   
   
8. Click on the red dot for the first Keyframe and drag it to the 1 second mark.
   
   

Now is a good time to playback the video. The "dC" should fade in and then the "ipollo Designs" should appear from the left. All we need to do now is to add the tagline.

← Back | Next →

Sample Project

Apple, Motion, iBooks Author, GarageBand, TextEdit, Pages, iMovie and Mac are trademarks of Apple Inc., registered in the U.S. and other countries. BellaOnline is an independent publication and has not been authorized, sponsored, or otherwise approved by Apple Inc. Screenshots used by permission.