lottie
    Learn About Lottie

    What is a Lottie Animation? & Integration Guide

    Lottie is an open-source animation file format that renders lightweight, scalable, vector-based motion graphics in real time. Created by Airbnb, it bridges the gap between designers and developers — enabling beautiful animations everywhere.

    Where Lottie Is Used

    From mobile apps to marketing sites, Lottie powers animations across every platform.

    Web Applications

    Add lightweight, scalable animations to websites without heavy GIFs or videos.

    Mobile Apps

    Deliver smooth, resolution-independent animations on iOS and Android.

    UI Micro-interactions

    Loaders, toggles, pull-to-refresh, and success/error states that delight users.

    Onboarding Screens

    Engage new users with animated walkthroughs and tutorials.

    Marketing & Landing Pages

    Eye-catching hero sections and feature showcases that convert.

    Product Demos

    Illustrate workflows and features with crisp, interactive animations.

    Advantages of Lottie

    Why designers and developers choose Lottie over traditional animation formats.

    Tiny file sizes compared to GIFs and videos — typically under 50 KB
    Resolution-independent vector graphics that look sharp on any screen
    Full programmatic control — play, pause, reverse, and scrub animations
    Cross-platform support: Web, iOS, Android, React Native, and more
    Design in After Effects, export with Bodymovin — no code required for creation
    Easily customizable colors, speed, and direction at runtime
    No quality loss at any scale or screen density
    Open-source format backed by a thriving community

    How to Use Lottie

    Getting started with Lottie is straightforward — here's the typical workflow.

    01

    Design Your Animation

    Create your animation in Adobe After Effects using shapes, paths, and keyframes. Keep it vector-based for the best results.

    02

    Export as JSON

    Use the Bodymovin plugin to export your After Effects composition as a lightweight .json file — the Lottie format.

    03

    Integrate into Your Project

    Use the appropriate Lottie library for your platform — React, Next.js, Flutter, iOS, or Android.

    04

    Control & Customize

    Programmatically control playback speed, direction, looping, and even change colors dynamically through code.

    Integration Guide by Platform

    Copy-paste examples for every major framework and platform.

    1. Install

    npm install lottie-react

    2. Usage

    import Lottie from "lottie-react";

const MyComponent = () => {
    return (
        <Lottie
            path="/path/to/animation.json"
            loop={true}
            autoplay={true}
            style={{ width: 300, height: 300 }}
        />
    );
};

export default MyComponent;