How to create a Lottie animation

Lottie animations bring vector graphics to life with smooth, lightweight motion that works seamlessly across apps and websites.

In this tutorial, we’ll take a stock vector illustration from Envato and turn it into a looping animated Lottie file using Lottie Creator. You’ll learn what Lottie is, and we’ll look at how to import and prepare your vector, create keyframe animations, and export a polished Lottie file for use in your projects.

1. How to set up a scene in Lottie Creator

Step 1

Lottie Creator is a simple yet powerful animation editor that lets you create lightweight, high-quality motion graphics for apps, websites, and digital projects.

To get started, either go directly to Lottie Creator or click Create Animation in your Dashboard on the LottieFiles webpage.

Once inside, you’ll see the main workspace, where you can import assets, animate elements, and preview your animation in real time.

Step 2

Upon launching Lottie Creator, you’ll see a blank canvas in the center, where we’ll build our animation. If it’s your first time using Lottie Creator, pop-up hints will appear, guiding you through the interface.

Here’s a quick overview of the workspace:

• Top Toolbar: Access the File Menu to create, edit, and export files. Use the tools to work with objects, create shapes, and move around the canvas.
• Left Sidebar: Import assets, browse the free library with Lottie animation examples, and manage layers and objects in your scene.
• Right Sidebar (Property Panel): Adjust scene settings and edit object properties.
• Main Scene: Access to Layers and Timeline to create keyframes and animation.

To begin, we’ll click Upload Asset in the Top Toolbar to bring in a custom vector graphic for animation.

Step 3

For this tutorial, we’ll animate this Groovy Cat cartoon character, a fun stock illustration by Yuzach. This will demonstrate how to take a static vector asset and bring it to life with movement in Lottie Creator.

After downloading and unzipping the file, navigate to the SVG folder in the provided asset pack. Click Upload Asset and select Groovy_Cat_Character_Dancing_TapeRecorder.svg to add it to the scene.

By default, the uploaded file may appear too large for the canvas. We can fix this in two ways:

• Resize the vector manually using the Move Tool (V) by dragging the corner handles while holding Shift to maintain proportions (or scaling it down in the Right sidebar).
• Adjust the Scene Dimensions in the Right sidebar, selecting a preset size or setting custom dimensions. For this tutorial, let’s use 1920 x 1080 px for a standard HD animation.

Last but not least, we can move the canvas with the Hand Tool (H) and access this and other tools from the toolbar on top.

Now, we’re ready to start animating!

2. How to animate a vector object in Lottie Creator

Step 1

Let’s start animating the tape recorder by creating simple keyframe-based transitions on the Timeline.

Select the recorder either by using the Move Tool (V) or by finding it in the Layers panel, located at the bottom of the workspace next to the Timeline.

If we take a look at our SVG file structure in the Layers panel, we’ll see that it consists of parent shape layers that contain child layers inside them. Any transformations applied to the parent shape layer will also affect all its child layers. To select and animate an individual object in the group, we need to either expand the group in the Layers panel or double-click the object directly on the canvas with the Move Tool (V).

Below the canvas, we’ll find essential Playback and Timeline options:

• Frame Counter: Displays the current frame and total duration.
• Playhead: The vertical orange slider that marks the current frame on the Timeline.
• Playback Controls: Play, pause, rewind, and loop options.
• Preview in Player: Allows us to test the animation in real time.

By default, the Playhead is positioned at frame 0s 0f, marking the start of the animation. The grey vertical sliders at the beginning and end of the Timeline define the total duration of the animation in seconds.

Step 2

Keyframing is a fundamental animation technique where we define specific positions or transformations of an object at certain moments in time. These reference points—keyframes—control the start and end points of a movement, allowing Lottie Creator to automatically generate smooth transitions between them.

In Lottie Creator, we can apply keyframes to Position, Scale, Opacity, and Rotation. To create the first keyframe for our animation:

• Select the tape recorder with the Move Tool (V).
• Move the Playhead to frame 0s 0f (the start of the animation).
• Rotate the recorder slightly to the left or manually set the Rotation value to -10 degrees.
• Stretch the object slightly by setting the Vertical Scale to 110% in the Property Panel.
• Click the small diamond icon next to Position, Scale, and Rotation to add keyframes. Alternatively, press S to create keyframes instantly. 

• By default, Lottie Creator sets the Anchor Point (pivot) to the center of an object. However, we can change it to the bottom-left corner to alter how the object rotates.

Step 3

Move the Playhead to frame 0s 10f and add new keyframes for Position, Scale, and Rotation.

This time, we’ll squash the tape recorder slightly by setting the Vertical Scale to 90%. To ensure the tape recorder sways symmetrically, set the Anchor Point to the bottom-center of the object.

Step 4

Move the Playhead to frame 0s 20f.

Now, we’ll tilt the tape recorder to the right to complete the swaying motion. Instead of manually adding new keyframes, we can copy and paste the keyframes from frame 0s 0f to save time:

1. Drag a box selection over the Position, Scale, and Rotation keyframes at frame 0s 0f.
2. Press Control-C (Command-C) to Copy the keyframes.
3. Move the Playhead to frame 0s 20f and press Control-V (Command-V) to Paste them.
4. Change the Rotation value to 10 degrees, tilting the recorder in the opposite direction.

Step 5

Scrub the Playhead back and forth to check that everything works smoothly. The goal is to keep the bottom edge of the tape recorder stable while it sways from left to right.

Step 6

Now, let’s extend the animation into a seamless loop.

1. Copy (Control-C) the keyframes from frame 0s 10f.
2. Move the Playhead to frame 1s 0f and Paste (Control-V).

No value adjustments are needed—this step simply completes the swaying motion.

Step 7

To complete the loop, we’ll copy the very first frame (0s 0f) and paste it at frame 1s 10f.

1. Select the first keyframes from Position, Scale, and Rotation at 0s 0f.
2. Copy (Control-C) and Paste (Control-V) them at frame 1s 10f.

Now, our tape recorder smoothly loops back to its original position.

Step 8

Finally, let’s set the animation duration in the Timeline.

1. Move the grey vertical slider at the end of the Timeline to frame 1s 10f.
2. Press Spacebar to Play the animation and enable Loop Mode to preview the seamless cycle.

Our tape recorder now moves in a continuous, natural swaying motion—perfect for our animated Groovy Cat scene!

3. How to animate vector particles in Lottie Creator

Step 1

The particles above the tape recorder are grouped in the ‘Particles’ group. We can access the individual elements in this group by expanding it in the Layers panel.

Since we’ll be animating each particle separately, let’s simplify our work by removing some elements. Select unnecessary objects either by double-clicking them on the canvas or by selecting them in the Layers panel and pressing Delete.

Step 2

Let’s start by animating the ‘Particles’ group as a whole, making it move up and down in sync with the tape recorder.

1. Move the Playhead to frame 0s 0f (the starting point).
2. Select the ‘Particles’ group in the Layers panel.
3. Add a Position keyframe by pressing S or clicking the small diamond icon next to the Y Position value in the Property panel.

Step 3

Move the Playhead to frame 0s 10f.

Now, let’s move the ‘Particles’ group downward when the tape recorder squashes.

• Option 1: Drag the particles down using the Move Tool (V).
• Option 2: Adjust the Y Position value in the Property panel. Hover over the Y value in the Position box until a double-arrow cursor appears. Then, click and drag to increase or decrease the value.

This step ensures the particles respond naturally to the squash effect.

Step 4

Now, let’s reuse the created keyframes to create a seamless looping animation.

1. Copy (Control-C) the first two keyframes (0s 0f and 0s 10f).
2. Paste (Control-V) them at frames 0s 20f and 1s 0f.
3. To close the cycle, Copy (Control-C) the first keyframe (0s 0f) and Paste (Control-V) it at frame 1s 10f.

By keeping each keyframe 10 frames apart, we maintain a consistent movement pattern.

Step 5

Press Spacebar to Play the animation and check the movement of the Particles group.

Step 6

Now, let’s add extra movement by animating each particle individually. Since we’ll be using similar motion patterns for each element, we can copy and paste keyframes to speed up the process.

Start with the yellow star:

1. Find the yellow star in the Layers panel and select it.
2. Create five Rotation keyframes at every 10th frame, using the following values:
   1. 0s 0f: 0°
   2. 0s 10f: 90°
   3. 0s 20f: 0°
   4. 1s 0f: -10°
   5. 1s 10f: 0°

This will create a subtle spinning effect as the star moves.

Step 7

Press Spacebar to Play the animation and preview the spinning effect of the yellow star.

Step 8

Instead of manually adding keyframes for every other particle, we can Copy (Control-C) and Paste (Control-V) the created Rotation keyframes to multiple elements.

To make the movement look more natural:

• Keep the Rotation values at 90° and 90° for some elements.
• For others, adjust the Rotation values slightly to 40° and 40° to add variation.

This prevents all elements from moving in unison, creating a more organic motion.

Step 9

Press Spacebar to Play the final animation and see all the particles moving dynamically!

4. How to create a Lottie animation of a vector character

Step 1

Now let’s bring our Groovy Cat character to life! We’ll start with a simple squash-and-stretch transition—one of the main principles of animation—to create a natural bouncing effect.

Select the CAT_Dancing parent shape group in the Layers panel. Since we want the cat to stretch from the bottom up, let’s set its Anchor Point to the bottom center.

Now, let’s create keyframes for the vertical Scale value:

1. 0s 0f: Leave the Scale at 100%.
2. 0s 10f: Squash the cat to 90%.
3. 0s 20f: Stretch the cat to 110%.
4. 1s 0f: Copy and Paste the second keyframe (0s 10f).
5. 1s 10f: Copy and Paste the first keyframe (0s 0f) to complete the animation cycle.

This creates a looping bounce effect!

Step 2

Press Spacebar to Play the animation and check out the smooth bouncing movement!

Step 3

Now let’s add a dancing motion to the cat’s arms!

We’ll animate the left arm first by adding keyframes for Position, Rotation, and Scale. There are no exact values required—we’ll manually adjust them using the Move Tool (V) for a more natural effect.

1. 0s 0f: Keep the arm in its default position (0° Rotation, 100% Scale).
2. 0s 10f: Rotate the arm down slightly (-15°) and stretch it horizontally for a subtle squash effect.
3. 0s 20f: Rotate the arm up (15°), moving it closer to the head while slightly stretching it vertically.
4. 1s 0f: Copy and Paste the second keyframe (0s 10f).
5. 1s 10f: Copy and Paste the first keyframe (0s 0f) to complete the loop.

This creates a rhythmic swinging motion!

Step 4

For smoother movement, make sure to adjust the Anchor Point of the left arm:

• Place it in the lower right corner so it rotates from the shoulder joint.
• Check that the arm-body connection stays seamless—use the Move Tool (V) to adjust any gaps.

Step 5

Now, let’s animate the right arm using the same looping motion. Select it in the Layers panel and create the following keyframes:

1. 0s 0f: Default Position, 0° Rotation, 100% Scale.
2. 0s 10f: Rotate the arm down (25°) and squash it horizontally.
3. 0s 20f: Rotate the arm up (-5°) and stretch it slightly.
4. 1s 0f: Copy and Paste the second keyframe (0s 10f).
5. 1s 10f: Copy and Paste the first keyframe (0s 0f).

Now, both arms move independently, making the animation more lively and dynamic!

Step 6

Let’s Play (Spacebar) the animation to see our cat grooving to the beat!

Step 7

To make the animation even more expressive, let’s add movement to the hair tuft, eyebrows, and glasses.

Follow the same keyframing pattern as before:

1. 0s 0f: Default position.
2. 0s 10f: Move the elements down and squash them slightly.
3. 0s 20f: Move the elements up, and stretch a bit. Rotate the glasses slightly for a fun wobble effect.
4. 1s 0f: Copy and Paste the second keyframe (0s 10f).
5. 1s 10f: Copy and Paste the first keyframe (0s 0f).

This adds subtle details that make the character feel more organic and natural.

Step 8

Let’s Play the animation and check out the new details!

Step 9

Now let’s add the up-and-down motion to the tail to enhance the dancing effect:

1. 0s 0f: Default position.
2. 0s 10f: Move the tail down, squash it horizontally.
3. 0s 20f: Move the tail up, stretch it vertically. Rotate it slightly so it moves behind the arm for a layered effect.
4. 1s 0f: Copy and Paste the second keyframe (0s 10f).
5. 1s 10f: Copy and Paste the first keyframe (0s 0f).

This creates a fluid tail movement that follows the rhythm of the animation!

Step 10

And here’s a trick: let’s refine the motion by offsetting keyframes for a more natural effect.

Click and drag keyframes to slightly shift their timing and move them to the following positions:

1. 0s 0f
2. 0s 08f
3. 0s 25f
4. 1s 3f
5. 1s 10f

Step 11

Press Spacebar to Play and check out the improved movement!

Step 12

For the final touch, let’s offset keyframes for some of the particles, making them move at different times. This enhances the animation flow, making it look more dynamic and fun!

5. How to export a Lottie animation from the Lottie Creator

Step 1

With our Groovy Cat animation complete, let’s prepare it for export! Before exporting, we can make any final adjustments:

1. Click anywhere on the background to reveal the Scene settings in the Property panel.
2. Resize the canvas if needed to match the dimensions of the objects.
3. Choose whether to keep a transparent background or set a solid color.

We also need to adjust the Timeline length to match our animation cycle. Since our loop ends at 1s 10f, let’s set the Time box to 00:01:10.

To preview the animation before exporting, click the Preview in Player button (Control-P) in the control panel below the canvas. This opens a separate window where we can test the loop and playback speed.

Step 2

Now, let’s export our Lottie animation!

Click the Export button in the top-right corner. This redirects us to the Export settings window, where we can fine-tune various parameters:

• Background color: Choose a transparent grid or a solid color for the preview.
• Speed: Adjust playback speed to slow down or speed up the animation.
• Format: Export as JSON (Lottiefiles animation), GIF, MP4, WebM, or MOV, depending on the project’s requirements.

For interactive and lightweight web animations, the Lottie JSON format is the best choice. If you need a social media preview, export it as MP4 or from Lottie to GIF.

Our Lottie animation is done!

And that’s it—our Groovy Cat character Lottie animation is ready!

With Lottie Creator, bringing static vector graphics to life has never been easier. In this tutorial, we learned what Lottie is, how to create a Lottie animation, and how to transform a stock SVG illustration into a smooth, looping animation using keyframing, squash and stretch, and motion offsets.

Whether you’re creating animated stickers, app assets, or dynamic UI elements, Lottie’s lightweight format makes it perfect for seamless integration into websites and mobile apps.

Check out the final result!

Ready to dive deeper and learn more about what a Lottie animation is? Watch this Envato tutorial to explore more ways to create a Lottie animation:

Stay tuned for more tutorials on motion design and interactive Lottie animations!

And if you’re eager to keep animating, these fun doodle groovy characters by GoDoodle might be perfect for your future projects!