JSON Animation Tutorial: From After Effects to Web

Getting a Lottie animation from a designer's After Effects project onto a live website involves several steps. Each step has its own set of tools, settings, and potential pitfalls. This tutorial walks through the entire pipeline: designing the animation, installing the export plugin, configuring export settings, and rendering the final JSON file in a web browser.

By the end, you'll understand the complete workflow and be able to take any After Effects animation and display it on a webpage.

Prerequisites

Before starting, make sure you have the following:

• Adobe After Effects (any recent version works, CC 2019 or later recommended)
• A web browser (Chrome, Firefox, Safari, or Edge)
• A code editor (VS Code, Sublime Text, or similar)
• Basic familiarity with HTML and JavaScript
• Node.js installed if you plan to use a build tool or framework

You don't need to be an After Effects expert. Even a simple shape animation is enough to follow along with this tutorial.

Step 1: Design Your Animation in After Effects

Open After Effects and create a new composition. For web animations, a composition size of 200x200 to 800x800 pixels works well. Set the frame rate to 24 or 30 fps. Keep the duration short, typically 1 to 5 seconds, since Lottie animations often loop continuously.

Create your animation using shape layers. Shape layers translate cleanly to Lottie because they're vector-based. Draw rectangles, ellipses, paths, and polylines. Apply transforms like position, scale, rotation, and opacity. Add keyframes to animate these properties over time.

A few design guidelines will save you trouble later:

• Stick to shape layers: They export cleanly. Text layers work too, but convert them to shapes first for best results.
• Avoid effects: Most After Effects effects (blur, glow, drop shadow) don't export to Lottie. Use shape-based techniques instead.
• Keep it simple: Fewer layers means smaller file sizes and better performance. Merge paths where possible.
• Use pre-compositions sparingly: They work in Lottie but add complexity. Flatten your composition when you can.
• Name your layers: Descriptive layer names make the exported JSON easier to debug and modify.

Step 2: Install the Bodymovin Plugin

Bodymovin is the bridge between After Effects and Lottie. It reads your composition and converts it into a JSON file that Lottie players can render.

To install Bodymovin, open After Effects and go to Window > Extensions > Find Extensions on Exchange. Search for "Bodymovin" and install it. Alternatively, you can download it directly from the lottie-web GitHub repository and install it manually through the ZXP installer.

After installation, access Bodymovin through Window > Extensions > Bodymovin. A panel opens showing your available compositions.

Step 3: Configure Export Settings

In the Bodymovin panel, select the composition you want to export. Click the gear icon next to it to open the render settings. These settings control the output quality and file size:

• Export Mode: Choose "Standard" for a regular JSON file. The "Demo" option generates an HTML preview file alongside the JSON, which can be useful for testing.
• Glyphs: If your animation contains text, enable this to include font data. For best compatibility, convert text to shapes before exporting.
• Assets: If your animation uses images, you can embed them as base64 data inside the JSON or export them as separate files. Embedding increases JSON size but makes the animation self-contained.
• Segments: You can split the animation into named segments for programmatic control. This is useful when a single composition contains multiple animation states (like idle, hover, and active).
• Extra Compositions: Enable this if your main composition references other compositions that should be included in the export.

For most web animations, the default settings work fine. Set the destination folder, give your file a descriptive name, and click Render.

Step 4: Validate the Exported JSON

Before integrating the animation into your project, validate it. Open the exported JSON file and check that it's well-formed. You can use our JSON Animation Viewer to preview the animation instantly. Drag the file onto the viewer and confirm that it plays correctly, loops smoothly, and matches what you see in After Effects.

Common issues to watch for during validation:

• Missing layers or shapes that didn't export
• Incorrect colors (especially if you used expressions for color values)
• Timing differences between After Effects and the Lottie render
• Blank areas where external image assets should appear
• Unexpectedly large file sizes (check for embedded raster images)

If something looks wrong, go back to After Effects, adjust the problematic layers, and re-export. The iteration cycle is fast since Bodymovin exports take only a few seconds.

Step 5: Add the Animation to Your Website

Now it's time to render the animation on a webpage. The standard approach uses the lottie-web library. Install it via npm:

npm install lottie-web

Create an HTML container for the animation and initialize the player in JavaScript:

import lottie from 'lottie-web';

const container = document.getElementById('animation');

lottie.loadAnimation({
  container: container,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: '/animations/my-animation.json'
});

The "renderer" option controls how the animation is drawn. SVG is the default and works well for most animations. Canvas rendering can be faster for complex animations with many elements. HTML rendering uses DOM elements and is the lightest option but supports fewer features.

Place your JSON file in your project's public or static assets directory so the browser can fetch it. The "path" option points to the file's URL relative to your site root.

Step 6: Control Playback Programmatically

One of Lottie's biggest advantages is programmatic control. The loadAnimation function returns an animation instance with methods you can call:

const anim = lottie.loadAnimation({ ... });

// Playback controls
anim.play();
anim.pause();
anim.stop();

// Speed control (1 = normal, 2 = double speed)
anim.setSpeed(1.5);

// Direction (1 = forward, -1 = reverse)
anim.setDirection(-1);

// Jump to a specific frame
anim.goToAndStop(30, true);

// Play a specific segment (frames 10 to 40)
anim.playSegments([10, 40], true);

You can also listen for events. The "complete" event fires when a non-looping animation finishes. The "loopComplete" event fires at the end of each loop cycle. The "enterFrame" event fires on every frame, giving you fine-grained control for syncing animations with other UI elements.

Using Lottie with React

If you're building with React, several wrapper libraries simplify integration. The lottie-react package provides a declarative component:

import Lottie from 'lottie-react';
import animationData from './animation.json';

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

The @lottiefiles/react-lottie-player package is another popular option with additional features like built-in controls and theming support. Both libraries wrap lottie-web internally, so the rendering quality is identical.

Optimizing for Production

Before deploying, optimize your animation for the best user experience:

• Minimize the JSON: Run the file through a JSON minifier to strip whitespace and reduce file size. Tools like LottieFiles Optimizer can also remove unnecessary data without affecting the animation.
• Enable gzip compression: Configure your web server to serve JSON files with gzip or brotli compression. This typically reduces transfer size by 60 to 80 percent.
• Lazy load animations: If the animation is below the fold, load it only when the user scrolls near it. Use Intersection Observer to trigger the load.
• Choose the right renderer: SVG is best for simple animations. Canvas handles complex animations with many elements more efficiently. Test both and measure performance on target devices.
• Respect reduced motion: Check the prefers-reduced-motion media query and either pause the animation or show a static frame for users who prefer less motion.

Troubleshooting Common Issues

Even with a clean workflow, you might run into problems. Here are the most frequent issues and their solutions:

• Animation doesn't play: Check the browser console for errors. The most common cause is an incorrect file path. Make sure the JSON file is accessible at the URL you specified.
• Missing elements: Some After Effects features aren't supported by Bodymovin. Check the Bodymovin compatibility list and replace unsupported features with shape-based alternatives.
• Performance issues: If the animation stutters, try switching from SVG to Canvas renderer. Also check if the animation has too many layers or overly complex paths that could be simplified.
• Large file size: Look for embedded raster images in the JSON. Remove them and use vector shapes instead. Also check for unnecessary keyframes that can be removed without affecting the animation.

Next Steps

You now have the complete workflow for getting Lottie animations from After Effects to the web. To go deeper, explore our other guides:

• What is Lottie Animation? A Complete Guide
• Lottie vs GIF: Why Lottie Animations Are Better
• Best Lottie Animation Resources for Developers

And don't forget to use our JSON Animation Viewer to quickly preview any Lottie file during your development process.