How to Create Lottie Animations: Step-by-Step

Creating your first Lottie animation can feel intimidating if you've never worked with motion design tools before. The good news is that you don't need to be a professional animator to create effective Lottie animations. Simple shapes, clean movements, and thoughtful timing go a long way.

This guide takes you from zero to a working Lottie animation. We'll cover the design principles that make animations effective, walk through the tool setup, build a simple animation step by step, export it as a Lottie JSON file, and integrate it into a web page.

Design Principles for Lottie Animations

Before opening any software, it helps to understand what makes a good Lottie animation. These principles apply whether you're creating a loading spinner or an elaborate onboarding illustration.

• Keep it purposeful: Every animation should serve a function. Loading indicators tell users something is happening. Success animations confirm an action completed. Transition animations guide attention from one state to another. If an animation doesn't serve a clear purpose, it's visual noise.
• Simplicity wins: The best UI animations are subtle. A gentle fade, a smooth slide, a soft bounce. Overly complex animations distract from the content and slow down the interface. They also produce larger JSON files and consume more CPU during rendering.
• Timing matters more than complexity: A simple circle that scales up with the right easing curve feels more polished than a complex illustration with linear timing. Spend time on your easing curves. Ease in for elements entering the screen. Ease out for elements leaving. Use ease in-out for elements that move within the viewport.
• Design for loops: Most Lottie animations loop continuously. Make sure the last frame transitions smoothly back to the first frame. Abrupt jumps between the end and start of a loop are jarring and unprofessional.
• Think about file size: Every layer, path, and keyframe adds to the JSON file size. Use the minimum number of layers needed. Simplify complex paths. Remove keyframes that don't contribute to the visual result.

Choosing Your Tool

You have several options for creating Lottie animations, each suited to different skill levels and needs:

Adobe After Effects (Professional)

After Effects is the most powerful option. It gives you complete control over every aspect of the animation: complex path morphing, masks, mattes, expressions, and multi-layer compositions. The learning curve is steep, but the creative possibilities are virtually unlimited. You'll need an Adobe Creative Cloud subscription.

LottieFiles Editor (Beginner-Friendly)

The LottieFiles browser-based editor is the easiest way to start. It provides a visual interface for creating simple animations without installing any software. You can create shape animations, color transitions, and basic motion paths. The editor exports directly to Lottie JSON format. It's free and works in any modern browser.

Figma + Plugins (Designer-Friendly)

If you already work in Figma, several plugins can convert your designs to Lottie animations. The LottieFiles Figma plugin handles basic transitions between frames. The Motion plugin offers more control with keyframe editing. This approach works well for simple animations where the design already exists in Figma.

Rive (Interactive Animations)

Rive is a dedicated animation tool with a focus on interactive, state-based animations. It has its own runtime format but can export to Lottie JSON for standard animations. The interface is more approachable than After Effects, and the free tier is generous for individual developers.

Building Your First Animation in After Effects

Let's walk through creating a simple loading animation: a circle that pulses (scales up and down) with a smooth easing curve. This is a practical animation you'd actually use in a real project.

1. Create a New Composition

Open After Effects and create a new composition (Composition > New Composition). Set the width and height to 200x200 pixels. Set the frame rate to 30 fps. Set the duration to 1 second (1:00). This gives you a compact, loopable animation canvas.

2. Draw a Circle

Select the Ellipse Tool from the toolbar. Hold Shift and draw a circle in the center of the composition. In the layer properties, set the size to 100x100 pixels and center it at position 100, 100 (the center of your 200x200 canvas). Set the fill color to your brand color and remove the stroke.

3. Add Scale Keyframes

With the circle layer selected, press S to reveal the Scale property. Move the playhead to frame 0 and click the stopwatch icon next to Scale to create a keyframe at 100%. Move the playhead to frame 15 (the halfway point of your 1-second animation) and change the scale to 120%. Move to frame 30 (the end) and set scale back to 100%.

You now have a circle that grows to 120% and shrinks back to 100% over one second. But the motion feels mechanical because it uses linear interpolation.

4. Apply Easing

Select all three keyframes (click the first, then Shift-click the last). Right-click and choose Keyframe Assistant > Easy Ease. This applies a smooth acceleration and deceleration to the motion. The circle now pulses with a natural, organic feel instead of a robotic linear movement.

For even more control, open the Graph Editor (click the graph icon in the timeline). Here you can adjust the speed curves manually. Pull the handles to create a more pronounced ease-in or ease-out. Experiment until the motion feels right.

5. Add Opacity Animation (Optional)

To make the pulse more visually interesting, add a subtle opacity change. Press T to reveal the Opacity property. Set keyframes at frame 0 (80% opacity), frame 15 (100% opacity), and frame 30 (80% opacity). Apply Easy Ease to these keyframes too. The circle now brightens as it grows and dims as it shrinks, creating a breathing effect.

6. Preview the Loop

Press the spacebar to preview the animation. Watch it loop several times. Check that the transition from the last frame back to the first frame is smooth. Since we set the same values at frame 0 and frame 30, the loop should be seamless. If you notice a slight jump, adjust the keyframe values until the loop is perfectly smooth.

Exporting with Bodymovin

With your animation complete, it's time to export it as a Lottie JSON file.

• Open the Bodymovin panel: Window > Extensions > Bodymovin
• Select your composition from the list
• Click the gear icon to open render settings
• Set the export mode to "Standard"
• Choose a destination folder and filename (e.g., "pulse-loader.json")
• Click Render

The export takes a few seconds. Bodymovin creates a JSON file containing all the animation data. For our simple pulse animation, the file should be around 2 to 5 KB.

Validating Your Animation

Before integrating the animation into your project, validate it. Open our JSON Animation Viewer and drag your exported JSON file onto the viewer. Check that:

• The animation plays correctly and matches what you see in After Effects
• The loop is smooth with no visible jump at the restart point
• Colors are accurate
• The dimensions match your composition size (200x200 in our example)
• The animation speed feels right

If anything looks off, go back to After Effects, make adjustments, and re-export. This iteration cycle is fast. Bodymovin exports take only a few seconds, and the viewer shows results instantly.

Implementing on the Web

With a validated JSON file, you're ready to add the animation to your website. The simplest approach uses the lottie-web library:

npm install lottie-web

Create a container element and initialize the animation:

import lottie from 'lottie-web';

const animation = lottie.loadAnimation({
  container: document.getElementById('loader'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animations/pulse-loader.json'
});

Place the JSON file in your public directory so the browser can fetch it. The animation starts playing automatically when the page loads. The SVG renderer produces crisp output at any size, and the animation loops continuously until you stop it programmatically.

For React projects, the lottie-react package provides a cleaner integration:

import Lottie from 'lottie-react';
import pulseLoader from './pulse-loader.json';

function LoadingSpinner() {
  return (
    <Lottie
      animationData={pulseLoader}
      loop={true}
      style={{ width: 48, height: 48 }}
    />
  );
}

Optimizing Your Animation

Even a well-designed animation can benefit from optimization. Here are techniques to reduce file size and improve performance:

• Remove unnecessary precision: Bodymovin exports coordinates with many decimal places. Rounding to 2 or 3 decimal places rarely affects visual quality but can reduce file size by 10 to 20 percent.
• Simplify paths: Complex vector paths with many anchor points produce larger JSON. In After Effects, use the Simplify Keyframes script or manually reduce anchor points on paths that don't need fine detail.
• Merge layers: If multiple layers move together as a unit, merge them into a single shape layer. Fewer layers means less JSON data and faster rendering.
• Use the LottieFiles Optimizer: Upload your JSON file to the LottieFiles optimizer tool. It automatically strips unnecessary data and simplifies the file structure. Typical reductions range from 20 to 60 percent.
• Enable server compression: Configure your web server to serve JSON files with gzip or brotli compression. This reduces transfer size by 60 to 80 percent on top of any file-level optimization.

Common Mistakes to Avoid

Learning from others' mistakes saves time. Here are the most common pitfalls when creating Lottie animations:

• Using After Effects effects: Blur, glow, drop shadow, and other effects don't export to Lottie. Recreate these looks using shape layers and opacity instead.
• Embedding raster images: Adding PNG or JPG images to your composition defeats the purpose of Lottie. The images get embedded as base64 data, inflating the JSON file and losing the vector advantage. Use vector shapes exclusively.
• Ignoring the loop point: If your animation loops, the transition from the last frame to the first must be seamless. Test the loop by watching it play for at least 10 cycles.
• Over-animating: Not everything needs to move. Subtle animations are more effective than busy ones. A gentle pulse is better than a spinning, bouncing, color-changing extravaganza.
• Skipping validation: Always preview your exported JSON in a Lottie player before integrating it. What looks right in After Effects might render differently in lottie-web due to unsupported features.

Beyond the Basics

Once you're comfortable with simple animations, explore more advanced techniques:

• Path morphing: Animate one shape transforming into another. Great for icon transitions (hamburger to close, play to pause).
• Trim paths: Animate the drawing of a path from start to end. Perfect for signature animations, line art reveals, and progress indicators.
• Masks and mattes: Use masks to reveal or hide parts of an animation. Useful for wipe transitions and spotlight effects.
• Parenting: Link layers so child layers inherit the parent's transforms. This creates complex hierarchical animations with minimal keyframes.
• Expressions: Use JavaScript-like expressions in After Effects to create procedural animations. Note that not all expressions export to Lottie, so test thoroughly.

Next Steps

You now have the knowledge to create, export, validate, and implement Lottie animations. Start with simple animations and gradually increase complexity as you get comfortable with the tools and workflow.

For more resources, check out our curated list of Lottie resources for free animations, tools, and learning materials. Read our JSON animation tutorial for a deeper dive into the export workflow. And use our JSON Animation Viewer to preview your animations during development.