Line Animation – Animating In Alight Motion, We’ll start with a simple example to demonstrate how to prepare a layer for line animation and how the Drawing Progress effect functions.In our initial project, we have a shape layer. In this case, we don’t need to fill this layer, so we’ll navigate to “Color and Fill” and set the fill to none.
However, we want to see the outline or stroke of the layer. To do this, go to “Border and Shadow” and toggle the switch to turn on the stroke. While we’re here, let’s also specify the stroke’s width and color. Once you’re done, exit this menu and select the shape layer by tapping on it.
Next, go to “Effects,” then “Add Effect,” and in the Effect Browser, choose “Drawing” and select “Drawing Progress.”We’ll use the default settings for now, but feel free to explore the presets,, as they can save you time during editing.
The drawing progress effect has only two properties: start and end, which control the trimming of the stroke from the beginning and end. The start of the stroke is represented as zero percent, and the end as one hundred percent.
By adjusting these properties, you can determine where the animation should begin and how long the visible part of the stroke should be. For our example animation, we want the drawing to appear from the start of the stroke and then go all the way around the box. To achieve this, set both the Start and End properties to zero and scroll the timeline to the project’s beginning.
Keyframe In Alight Motion
At this point, the stroke won’t be visible because we’ve instructed Alight Motion to trim the End all the way to the start of the stroke. Now, on the End property, add akeyframe, and move forward on the timeline. Scroll the spinner all the way to one hundred. Apply an easing curve preset to slow the animation at the beginning and end.
If you press play, you’ll see the box being drawn. To make the stroke disappear as it’s being drawn, position the playhead between the two End property keyframes. Then, select the Start property and add a keyframe. Go beyond the second End property keyframe and swipe it to one hundred percent. When you slowly scrub through the project, you can see that animating the End property draws the stroke, and the Start property trims it afterward, making it completely disappear.
Apply an easing curve preset to this animation, and then press play. Congratulations, you’ve completed our example! Now that we understand how the Drawing Progress effect works, let’s create the line burst animation as shown at the beginning of this video.
Edit Shape Line Animation
In this new project, we have a text layer and a background layer. Let’s start by adding a vertical line. Tap “Edit Shape” and set the x value to zero for both Point 1 and Point 2. While here, adjust the length of the shape by modifying the y values. Now the line is the desired length and vertical. Exit this menu, tap “Border and Shadow,” and reduce the stroke width to make it thin, similar to the intro. Also, change the stroke color here.
Now, go to “Effects,” “Add Effects,” and head to the Drawing and Edge category. Choose “Drawing Progress” and select the standard settings. Set the Start value to one hundred so that the line disappears. Add a keyframe at the layer’s beginning and move forward on the timeline, setting the value to zero. You’ll see the line animate from the top.
Next, add animation to the End property. Place the playhead between the two existing Start property keyframes and add an End property keyframe. Go beyond the second Start keyframe and set the value of End to zero. Apply the easing curve preset to both properties.
Add Effect
Now, when you play it, you’ll notice that the line appears and then disappears, just like in our example! To complete the rest of our burst Line Animation, let’s add a repeat effect. Go to “Effects,” “Add Effect,” and navigate to the Repeat category. Select the “Radial Repeat” effect with standard settings. Copies of the line will appear in a circular pattern. You can adjust the number of copies if needed.
While the line layer is selected, go to “Move and Transform” and position the burst on top of the text. If you play the animation, you’ll see an elegant line burst! If it’s too small for your text, adjust the Radius property in the Radial Repeat effect to make the burst larger.
Border and Shadow
Now that our line burst is complete, let’s add the animated arcs we saw in the intro of this video. This is similar to adding the line burst. First, add a circle and increase its size to cover the entire text. Now, turn on the layer’s Stroke in “Border and Shadow.” Reduce the stroke width and change the color. In “Color and Fill,” set the fill to none, leaving us with a circular outline.
As before, add the Drawing Progress effect to the shape. Set the End value to zero and add a keyframe at the layer’s beginning. Move forward on the timeline, set the End value to one hundred, and apply the specified easing curve preset.
Add keyframes for the Start property as well, just as before. Our animation is complete! Press play to see the results. With only a few keyframes, you can create interesting animations. Feel free to customize this fictional show intro further. For example, you can add more lines and make the text fade in, as we did in our final version!
If you have any questions, please don’t hesitate to ask in the comments. We’re here to assist in any way we can!