lottie
    Tutorial

    How to Use Lottie JSON in After Effects

    A complete step-by-step guide to importing, editing, and re-exporting downloaded Lottie JSON files in Adobe After Effects using Bodymovin.

    Prerequisites

    • Adobe After Effects CC 2019 or later
    • Bodymovin plugin (free) or LottieFiles AE plugin
    • A downloaded Lottie JSON file (.json format)

    Step-by-Step Guide

    1. Install the Bodymovin Plugin

    • • Open After Effects and go to Window → Extensions → Browse Extensions (or visit aescripts.com/bodymovin).
    • • Search for 'Bodymovin' and install it. Restart After Effects after installation.
    • • Alternatively, install the LottieFiles plugin from the Creative Cloud marketplace for a more streamlined experience.

    2. Prepare Your Lottie JSON File

    • • Download your Lottie JSON file from LottieWizard or any Lottie marketplace.
    • • Make sure the file extension is .json — this is the standard Lottie format.
    • • Note the animation dimensions and duration from the file metadata if available.

    3. Import the JSON into After Effects

    • • Open After Effects and go to Window → Extensions → Bodymovin.
    • • In the Bodymovin panel, click the import/load icon.
    • • Select your downloaded .json file. Bodymovin will parse and load the animation.
    • • A new composition will be created matching the animation's dimensions and frame rate.

    4. Explore & Edit the Composition

    • • The imported composition will contain all layers, shapes, and keyframes from the Lottie file.
    • • You can modify colors, timing, easing curves, and add new elements.
    • • Shape layers, solid colors, and text layers are fully editable.
    • • Note: Some expressions or effects may need manual adjustment after import.

    5. Preview & Render

    • • Press Spacebar or use RAM Preview to watch the animation play.
    • • Adjust timing in the timeline if needed.
    • • To export: use File → Export → Add to Render Queue, or re-export as Lottie via Bodymovin for web use.

    Troubleshooting

    Bodymovin fails to import the JSON

    Ensure the file is valid Lottie JSON (not dotLottie/.lottie). Try opening it in a text editor to verify it starts with '{'. Re-download if corrupted.

    Missing fonts after import

    Install the fonts used in the animation on your system. Check the 'fonts' array in the JSON file to identify required typefaces.

    Expressions errors in the timeline

    Some Lottie expressions don't map 1:1 to After Effects. Manually recreate complex expressions or simplify them before import.

    Images/assets not showing

    If the Lottie uses external images, place them in the same directory as the JSON file. Check the 'assets' array in the JSON for expected file paths.

    Need Lottie Animations?

    Browse thousands of premium Lottie animations ready to download and use in your projects.

    Browse LottieWizard