Skip to content
Get packs

Lottie

JavaScript player that renders After Effects animations exported as JSON on the web.airbnb/lottie-web

GitHub Download source
Stars
32.3k
Forks
3k
Licence
MIT
Language
JavaScript
Last update
1.2 years ago
Type
Library

No commits in over a year — check for forks or alternatives before adopting.

What it is

Lottie for Web plays animations that designers make in Adobe After Effects. A plugin called Bodymovin exports the animation as JSON, and this library loads that file and draws it in a web page. The README says designers can ship animations without an engineer recreating them by hand.

  • Load an exported JSON animation into a web page with lottie.loadAnimation()
  • Control playback with play, pause, setSpeed, or goToAndStop
  • Play specific frame ranges with playSegments
  • Update text layer content with updateDocumentData

Great for

  • Front-end developers who want designer-made motion in a website
  • Teams already using After Effects for animation handoff
  • Projects that need animations rendered as SVG, canvas, or HTML

Not ideal for

  • People who only need simple CSS or JavaScript animations, since this adds a library and an export step
  • Anyone without After Effects, because the workflow depends on exporting from it
  • Projects needing the full After Effects feature set, since the README does not claim complete support
Step-by-step guide: how to use LottieInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Install with a package manager

    You'll need: Node.js or npm, for installing via npm

    Install the HTML player with npm

    npm install lottie-web
  2. 2

    Run it

    • Export a composition as JSON from After Effects using the Bodymovin extension
    • Include the lottie.js file from build/player/ in your HTML page
    • Call lottie.loadAnimation() with a container element, renderer, and path to the JSON file
  3. 3

    Get the most out of it

    • Use the renderer option ('svg', 'canvas', or 'html') to match your performance needs
    • Use setQuality() to trade rendering quality for player performance
    • Use playSegments() to play only part of an animation
    • Read the Composition Settings wiki page for setting details

Downloads

Source code (.zip)master branch · straight from GitHub

Strengths

  • Designers can export animations directly from After Effects without engineer rebuilds
  • Supports SVG, canvas, and HTML renderers
  • Well-documented API with examples and an MIT license

Trade-offs

  • Requires the Bodymovin plugin and After Effects to create the JSON files
  • The README notes some animations with repeaters need a deep clone when loaded more than once

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.