Creating Multiple Animations from One Lottie Character

Hello there! I would love to help you with this.

To understand how to change your robot, we first have to understand what a Lottie animation actually is.

Imagine a traditional video (like an MP4 or a movie) is a photograph or a printed flip-book. Once it's printed, you can't easily reach inside and change what the character is doing.

A Lottie animation, however, is not a video at all. It is a digital marionette puppet controlled by a recipe. The file is actually just a bunch of math code that says: "Put a blue circle here for the head, put two black dots for eyes, and move the arm from Angle A to Angle B over two seconds."

Because it's a puppet, you can make it do new tricks! But because you want completely new actions (jumping, being sad, acting curious), changing the colors in a simple viewer isn't quite enough—you need to step into the puppet workshop.

Here is how you do it, broken down into simple steps.

Step 1: Pick Your "Puppet Workshop" Tool

A few years ago, you had to use very complex Hollywood software to do this. Today, you have much friendlier options:

1. LottieLab (Easiest & in your browser): This is like a web-based workshop made specifically for Lottie. You can drag and drop your robot file right into it, see its limbs, and create new animations directly on a timeline.
2. Adobe After Effects (The Professional Standard): This is the heavyweight tool animators use. You import the robot, animate it, and export it using a free plugin called Bodymovin.
3. Figma + Anima/Jitter: If you like designing in Figma, you can convert the robot into vector shapes, change the poses, and animate them there.

Recommendation: Start with LottieLab or an editor like Jitter because they let you edit the Lottie file directly without a steep learning curve.

Step 2: Unpack the Robot's Parts

When you open your robot in one of these tools, you will notice that the robot isn't a single flat picture. It is made of layers:

• Head layer
• Smile layer
• Left eye / Right eye
• Body layer
• Arm layers
• Leg layers

Think of these like paper cut-outs stacked on top of each other.

Step 3: Create the New Emotions and Actions

To make your new animations, you keep the same robot body, but you change the "recipe" of movements on the timeline:

• For Sad:
  • Select the smile shape and flip it upside down (or draw a squiggly line).
  • Tilt the robot's head slightly downward.
  • Droop the shoulders down a few pixels.
• For Jumping with Joy:
  • Frame 1 (The Wind-up): Bend the robot's knees and lower the body down slightly.
  • Frame 2 (The Jump): Move the whole body up into the air, stretch the legs straight down, and throw both arms up.
  • Frame 3 (The Landing): Bring the robot back down, bend the knees again to absorb the shock, and return to standing.
• For Curious:
  • Tilt the head sideways (like a puppy hearing a funny sound).
  • Make one eye slightly bigger than the other, or raise one eyebrow shape.

Step 4: Export as New Lottie Files

Once you finish each animation:

1. Hit Export.
2. Choose Lottie JSON (or .lottie).
3. Name them clearly: robot-happy.json, robot-sad.json, robot-jumping.json.

Now, in your website or app, you have a whole cast of different animations featuring the exact same robot character!

Where should we start?

Do you already have access to a tool like Adobe After Effects, or would you prefer to try an easy browser-based tool like LottieLab? Tell me what you have, and we can take the next step together!

Sources:

• https://lottiefiles.com/blog/working-with-lottie/how-to-edit-lottie-animations
• https://www.lottielab.com
• https://airbnb.design/introducing-lottie/

Yes, absolutely! When you only need something done once, outsourcing is usually the smartest choice.

Think of it like getting a custom costume made: instead of buying a sewing machine and spending weeks learning to stitch, you just hand your fabric and an idea to a tailor.

Here is the quickest, most painless way to outsource this project.

1. Where to Find the Right Person

You want to look for someone who calls themselves a "2D Animator" or a "Lottie Specialist."

• LottieFiles "Hire an Animator": LottieFiles actually has its own marketplace built right into their website with pre-vetted animators who live and breathe this file format.
• Fiverr: Great for quick, one-off projects. Search for "Lottie animation" or "edit Lottie JSON". You can often find someone to do a few short variations for $20–$50 per animation.
• Upwork: Better if you want to post a job and let freelancers apply to you with their portfolios.

2. The Secret to a Smooth Hand-off (Your "Recipe Card")

Freelancers work best when you give them very clear instructions. If you leave things vague, they will guess, and you might not get what you imagined.

You can literally copy, paste, and fill in this template when you message a freelancer:

Project: Create 4 new animations for an existing robot character.

What I will provide:

• The original Lottie .json file of the robot.

What I need back: Four separate, loop-ready Lottie (.json or .lottie) files using the exact same robot character:

1. Happy: A cheerful idle bounce with a big smile.
2. Sad: Head down, shoulders slouched, slight frown.
3. Jumping with Joy: Squats down, leaps into the air with arms up, and lands smoothly.
4. Curious: Head tilted sideways, one eye wider than the other, looking side-to-side.

Requirements:

• Maintain the exact same colors and visual style as the original.
• Transparent background.
• Optimized file size (keep it lightweight).

3. A Quick Tip Before You Hire

Make sure you own or have the right license to modify the original robot animation:

• If you downloaded it from LottieFiles under a free Creative Commons license, check if it allows "Derivative Works" (changes).
• If you bought it from a marketplace, check the license terms to ensure commercial and modification rights are allowed.

Once you send the file and the list above to a freelancer, an experienced animator can usually deliver all four animations to you in 2 to 3 days!

Sources:

• https://lottiefiles.com/hire-animators
• https://www.fiverr.com
• https://www.upwork.com