Lottie

Overview

Render After Effects animations exported as JSON. Lightweight, scalable, and interactive. lottie-web (Airbnb, current release 5.13.0) parses the JSON produced by the Bodymovin exporter and draws it as SVG, canvas or HTML, with an API for playback control and events. Compressed .lottie archives need the separate dotLottie player covered at the end of the instructions.

Instructions

Setup

# Install lottie-web for vanilla JS/TS projects.
npm install lottie-web

The default import bundles all three renderers plus the expression engine (about 77 KB gzipped). When an animation uses no After Effects expressions, import the light SVG-only build instead (about 47 KB gzipped, no eval):