Virtually all video on the internet is comprised of thousands or millions of individual raster images, or frames. While compression greatly reduces the file sizes, each frame is still essentially a raster image that is resolution-dependent, and the video itself is frame-rate-dependent. You cannot make the video larger or add more frames after it is rendered.
Lottie attempts to bring the advantages of vector graphics to animation. Lottie animations store vector data that is resolution-independent and allows vector shapes to be animated directly on a webpage or within an app. A Lottie animation is perfect for animated logos and elements that you want to stand out while keeping file sizes small.
In this tutorial, you will be creating this Lottie logo animation.
1. What you’ll need
For this tutorial, you will be using Adobe Illustrator and Adobe After Effects to create an animated logo, so you’ll need to have those installed. In order to create Lottie animations, you will also need to have the Lottie extension installed in After Effects. Visit the Lottie Files for After Effects page and follow the instructions to install the latest version of the plugin. With the Lottie plugin installed, you will be ready to create a Lottie animation!
2. Prepare the vector file in Adobe Illustrator
Step 1
Download the Roast Bee file from Envato, extract the compressed zip file, and locate the AI folder within. Open the Roastbee Logo.ai file in Adobe Illustrator.
Step 2
Create a new AI file using the 1920×1080 film and television preset. Working in this size will ensure that we have an appropriately sized shape when we move it to After Effects, so that we don’t need to refine it too much to make the animation work. Save it as Roastbee for Animation.ai
Select the shape of the logo in the Roastbee Logo.ai file, copy it, and paste it into the new Roastbee for Animation.ai file you just created. Tweak the size and position to make sure it’s centered and completely contained within the artboard.
Step 3
Most finalized logo files like this are outlined, meaning that they are flattened shapes with a fill and no stroke. You will need to separate the wings from the flattened shape, but there are multiple ways to approach it. In this case, since the design lends itself to stroked vector lines and After Effects provides a lot more options to animate stroked vector lines, we will prepare it for that kind of workflow. Select the bee shape and go to Object > Path > Offset. A negative offset of -24px should move the vector lines to the center of the shape.
Click OK to accept the offset. Illustrator will make a copy of the shape with the negative offset applied. Select everything except the new offset lines, change the fill color so that you can see the offset shapes on top of it, and lock it in the Layers panel so that it cannot be accessed.
Step 4
Even though the vector lines are in the center of the shape, it is still an outlined shape with a fill. You will need to clean up the lines so that there is a single open-ended vector line for each shape.
Think about which parts you want to animate separately. Use the Direct Selection Tool (A) to select points where those lines connect with other parts of the design, then press the Cut button on the floating toolbar to break the connection. Let’s start with the head and separate it from the antennae. Hold Shift and click the points where the head connects with the antennae to select them.
Then click the Cut button on the floating toolbar to separate the head from the antennae shapes.
Step 5
Make sure all the paths are open. As you work through the lines, you will find that some of them are closed paths. Select points on the end of the shape, and delete them to get a single open line roughly at the center of the original shape. We will add a thick stroke to the lines later to get the original design.
Step 6
Select all with Command-A, and then swap the fill and outline in the toolbar. This will allow you to see which shapes are still closed and need to be opened and cleaned up as you work through the rest of the shapes.
Step 7
At the bottom, near the bee’s stinger, the negative offset produced some messy results. You can delete the multiple shapes on the right side of the abdomen, clean up the line on the left of the abdomen, and then reflect it.
Cut the lines that make up the stripes of the abdomen from the outline using the Direct Selection Tool (A) and the Cut command that we’ve been using for the rest of the shapes.
Use the Direct Selection Tool (A) to select the points on the right side of the abdomen and delete them.
The left side of the abdomen outline is also messy, but it is at least a single solid line. Delete the points that create a closed outline so that you have a single open line, as we did with the antennae and other lines.
When you have a single line for the left side of the abdomen, select it, and then use Object > Path > Simplify to reduce the complexity as much as possible while retaining the curve of the abdomen outline.
Reflect the line with Object > Transform > Reflect and click Copy on the reflect dialog box to make a reflected duplicate of the line.
Finally, move the reflected line to the right so that the end near the stinger snaps to the end of the left line. Join the reflected line on the right with the left line by dragging a box over both with the Direct Selection Tool (A) and clicking Join on the floating toolbar.
Finally, join the abdomen with the head shape the same way. This will create a single closed shape from the head and abdomen lines.
Continue using these techniques to clean up the rest of the design. You can also save some time by cleaning up one wing and then using the reflect technique to make the opposite wing.
Step 8
Once you’ve cleaned up the rest of the design, there should be a single line for each of the following:
- Left antenna
- Right antenna
- Left wing
- Right wing
- Abdomen & head combined (this is the only closed line)
- Stripe 1 (the upper abdomen stripe)
- Stripe 2 (the lower abdomen stripe)
You can also increase the stroke weight if you’d like to make sure that it’s close to the original design. However, we will add the stroke in After Effects, so it’s not necessary to do it in Illustrator.
3. Animate in After Effects
We need to get the vectors from Illustrator to After Effects while keeping them in the correct position relative to each other. After Effects allows us to paste vectors from Illustrator directly into After Effects as masks, but unfortunately masks lack the control of shape layers when it comes to animating.
Masks are also not vector layers, which we’ll need when we create a Lottie animation. They are vector masks applied to raster layers. Pasting our vectors from Illustrator into a mask on a solid layer is a quick way to get them into After Effects while maintaining positioning, though.
Step 1
Select all of the newly cleaned lines and use Command-C to copy them. Open After Effects, close any tutorials or new file creation dialog boxes that it opens, and click New Composition.
Then use the preset for Social Media Landscape in HD at 1920×1080, setting the length of the animation to about 5 seconds.
Step 2
Create a new Solid Layer by clicking in the timeline panel and pressing Command-Y. In the dialog box, we can leave the default color—just make sure it’s set to the composition size of 1920×1080 and click OK.
With the new solid still active, press Command-V to paste the vector shapes we copied from Illustrator, and they will be applied to the solid as vector masks. In the timeline, you will need to expand the layer and expand the masks property to access them individually.
Step 3
You will need to move the vectors over to a shape layer. Keeping them separated will give you the most control over the animation. Right-click in the space in the left section of the timeline panel, and click Shape Layer. This will contain our vectors.
Step 4
Now we need to move the vectors over from the raster solid layer. Expand the solid layer, expand masks, and expand the last mask at the bottom. Then, click the Mask Path property and press Command-C to copy the vector path. Now expand the Shape Layer that you created earlier and click Add > Path.
Make sure the playhead is at the first frame of the timeline (it should be by default). Then expand the path you just created, expand the Path property under it, and click the Stopwatch to create a keyframe. This keyframe is necessary to contain the vector data from our mask. Now press Command-V to paste the vector data we copied from the mask.
Make sure to name the path. I use the following convention in this project: [Item][side][purpose]. So you’ll see the left wing is named Wing L.
Step 5
You’ll need to repeat the previous step for each of the shapes. In this case, there aren’t that many, so it doesn’t take long. For larger projects with more vectors, there are plugins that will automate the process, but figuring out which shape is which and organizing them still takes time.
Once all the shapes are copied over, you’re done with the solid layer, and you can delete it (or hide it at least if you want to keep it around for some reason).
Step 6
On the Shape layer, click Add > Stroke. This stroke will apply to all of the paths above it within the same group.
It’s worth mentioning how crucial groups are in After Effects. Groups have Transform Properties that control all of the shapes within. Groups can also separate fills and strokes so that you can apply a fill or stroke only to the vectors in the same group or to all the groups above it. Using groups allows you to control shapes independently and together, and it also simplifies rigging.
Step 7
Click Add > Group (Empty) and name it Wing L xform since this is the group we will use to animate the left wing. Drag the left wing into the group you just created, and do the same for the right wing, naming the group Wing R xform. Then drag both groups to the top of the stack in the shape layer. You can also expand both groups and see that not only do they have the wing paths we dragged into them, but they also have transform properties.
Step 8
Expand the Wing L xform group and expand the transform property within. We will need to adjust the anchor point since we want the wing to rotate around the last vector point on the right where the wing and right wing touch. 2D transform properties in After Effects are listed in alphabetical order: X (horizontal) and Y (vertical). Click and drag on the second number on the transform property for the Vertical Y Anchor Position to move the anchor point so it’s over the correct point. Set it to about -67.
Unfortunately, this means the entire shape has moved down to the anchor point. It’s an easy fix, though. Click and drag the Position property’s pickwhip (the little spiral to the right of the position numbers) to the Anchor property.
You’ll see the Position property’s numbers turn red, and they should match the numbers of the Anchor property. The shape will also move back up to where it had been before.
Repeat this step for the right wing.
Step 9
We will only keyframe the left wing, and then we’ll use a simple expression to make the right wing mirror it.
Let’s go ahead and animate the left wing so we can see that everything is working when we link up the right wing. Expand the Transform property of the left wing if it isn’t already expanded. Click the Stopwatch on the Rotation property to start automatic keyframing. This will also create a keyframe under the playhead. Move the playhead forward about 5 frames and set the Rotation to about -14 degrees.
Move the playhead forward another 5 frames, and then select the first keyframe and press Command-C to copy and Command-V to paste at the playhead so that the wing returns to its initial state.
Then move the playhead forward another 5 frames and set the Rotation Property to about 23 degrees. We can refine these values later.
Move the playhead 5 more frames forward, select all of the keyframes you created, and press Command-C to copy and Command-V to paste all of them and get a longer cycle. Move the playhead to the last keyframe and press N to set the end of the work area so that when you press Space to play the animation, it will loop.
Step 10
Expand the transform properties for the Wing R xform group, and then click the pickwhip on the Rotation property and drag it to the Rotation property of the Wing L xform group.
This copies the exact values but doesn’t quite give us what we want. Notice that that the values are now red, indicating that the Rotation property is linked to the left wing’s rotation property. Expand the Rotation property to see the expression linking it to the Wing L xform Rotation property. Click the expression and add *-1 to the end to multiply by negative 1.
Step 11
Select the Shape layer and click Add > Stroke.
Expand it and select a color. If you want to use the color from the original illustration (the gold lines), use hex code #D6AC84.
Set the Stroke Width to 51 and the Line Cap to Round Cap. Make sure the stroke is at the bottom of the shape layer stack, under all of the paths and groups, so that it applies to all of them.
Step 12
The wings will need to be filled to cover the lines of the body below when the wings move. We need to make modified versions of the wings to get the fill to look correct, though. Select the Wing L xform group, press Command-D to duplicate it, and rename the new wing group Wing L Fill.
Then, with the new group active, click Add > Fill. Set the fill color to the background color of the original illustration, #1A2632. You will also need to make sure the Wing L Fill group is underneath the Wing L xform group so that we can add the stroke on top of the fill later.
Step 13
Expand the Path property in the Wing L Fill group, double-click the point at the center of the shape to select it, and then press Delete on the keyboard to delete it.
Continue deleting points up to the top of the wing until it looks like this.
Now the Wing L Fill group is keyframed just like the Wing L xform group. If you want to make it procedural, you can expand the Transform properties of the Wing L Fill group, delete the keyframes on its Rotation property, and pickwhip it to the Wing L xform group’s Rotation property. This way, the entire animation is controlled by a single set of keyframes.
Step 14
Repeat steps 12 and 13 for the right wing.
Step 15
Finally, just duplicate the stroke you created earlier twice by selecting it and pressing Command-D, and put one copy in each of the Wing L xform groups to add a stroke over the fill. You can also create a group for the body and a group for the stripes, and then put a duplicate of the fill in the body group and a duplicate of the stroke in the stripes group.
Step 16
Adjust the keyframes as needed to get the look you want in your animation. When you’re done, go to Composition > Trim Comp To Work Area.
4. How to create the Lottie animation
Step 1
Now, let’s start creating our Lottie animation. Go to Window > Extensions > Lottie Files to open the Lottie exporter. Sign in if prompted.
Step 2
Check the box for the Roast Bee composition and click Render at the bottom of the exporter interface. Since we prepared the entire animation as a vector layer within After Effects, everything should be supported fully by Lottie.
Step 3
Now you can click Upload to send your animated Lottie logo to your LottieFiles account and embed it in web projects from there. You can also download the animation as any of the supported file types for use locally.
Conclusion
Lottie is a very powerful way to create lightweight vector animations, but it requires some significant setup when using After Effects, since After Effects is a primarily raster-based editing application. Preparing your animation appropriately using vector-based shape layers in After Effects greatly improves support but requires some setup.
I hope you found this tutorial helpful. Be sure to check out this post from the Envato blog, and any of these articles from Envato Tuts+!