無程式碼也能輕鬆打造專業LINE官方帳號！一鍵導入模板，讓AI助你行銷加分！
High-quality motion design has become an essential part of modern web and mobile applications, but implementing animations from design tools has traditionally required manual engineering effort. Designers create beautiful animations in After Effects, and developers spend days reproducing them in code. Lottie eliminates this gap entirely by rendering After Effects animations natively using JSON exports.
Originally created by Airbnb and later maintained by the community through LottieFiles, Lottie has become the industry standard for cross-platform animation delivery. The web version, Lottie-web, renders animations as SVG, Canvas, or HTML elements, producing crisp, scalable results that match the designer’s intent exactly.
The workflow is straightforward: a designer creates an animation in After Effects, exports it as a JSON file using the free Bodymovin plugin, and a developer loads that JSON into Lottie with a few lines of code. The animation is resolution-independent, can be controlled programmatically, and has a file size typically measured in kilobytes rather than the megabytes of a GIF or video.
How Does Lottie Compare to Other Animation Formats?
Before Lottie, web animation formats each had significant trade-offs. Lottie combines the best qualities of its predecessors while avoiding their limitations.
| Format | File Size | Quality | Scalability | Interactivity | Browser Support |
|---|---|---|---|---|---|
| Lottie (JSON) | Small (5-50 KB) | Vector perfect | Yes (SVG) | Full control | All modern |
| GIF | Large (500 KB - 5 MB) | Pixelated | No | None | Universal |
| CSS Animation | Small | Good | Yes | Limited | Modern |
| Video (MP4) | Medium | Raster | No | None | Universal |
| Sprite Sheet | Large | Raster | No | Basic | Universal |
Lottie’s combination of small file sizes, vector quality, programmatic control, and cross-platform support makes it the preferred format for UI animations, loading indicators, onboarding flows, and interactive illustrations.
graph LR
A[After Effects] -->|Bodymovin Plugin| B[Lottie JSON]
B --> C[Lottie-web]
B --> D[Lottie-iOS]
B --> E[Lottie-Android]
B --> F[Lottie-React-Native]
C --> G[SVG / Canvas / HTML]
D --> H[Core Animation]
E --> I[Canvas API]
F --> J[Native Bridges]
What Are the Key Methods and Events in Lottie-web?
The library provides a comprehensive API for controlling animation playback and responding to animation events.
| Method | Description | Example |
|---|---|---|
lottie.loadAnimation() | Load and initialize an animation | loadAnimation({path: 'data.json', renderer: 'svg'}) |
animation.play() | Start or resume playback | animation.play() |
animation.pause() | Pause at current frame | animation.pause() |
animation.stop() | Stop and reset to frame 0 | animation.stop() |
animation.goToAndStop() | Seek to specific frame/time | animation.goToAndStop(30, true) |
animation.setSpeed() | Set playback speed multiplier | animation.setSpeed(2) |
animation.setDirection() | Forward or reverse | animation.setDirection(-1) |
animation.destroy() | Clean up resources | animation.destroy() |
| Event | Fires When | Use Case |
|---|---|---|
complete | Animation finishes | Trigger follow-up action |
loopComplete | Each loop ends | Update counter or state |
enterFrame | Every frame | Sync with other animations |
segmentStart | New segment begins | Chapter-based animations |
DOMLoaded | Elements rendered | Start interaction handlers |
What After Effects Features Does Bodymovin Support?
The Bodymovin plugin exports a comprehensive subset of After Effects features, though some advanced capabilities have limitations.
| Feature Category | Fully Supported | Partial / Limited |
|---|---|---|
| Shape Layers | Paths, fills, strokes, gradients | Complex boolean operations |
| Transforms | Position, scale, rotation, opacity | 3D layer transforms |
| Masks | Path masks, alpha mattes | Track mattes with complex shapes |
| Text | Basic text, fonts, kerning | Per-character 3D animation |
| Effects | Drop shadows (limited) | Most native After Effects effects |
| Expressions | Basic JavaScript expressions | Complex scripting |
FAQ
What is Lottie? Lottie is an open-source animation library by Airbnb that renders Adobe After Effects animations natively on web, Android, iOS, and React Native platforms. It parses animations exported as JSON files from the Bodymovin plugin and renders them using native graphics APIs – SVG for the web, Core Animation for iOS, and Canvas for Android.
What renderers does Lottie-web support? Lottie-web supports three renderer types: ‘svg’ (default, renders as SVG elements for crisp scalable animations), ‘canvas’ (renders on an HTML5 canvas for complex animations with many elements), and ‘html’ (renders using HTML elements for certain animation types). The SVG renderer is recommended for most use cases due to its sharpness and accessibility.
How do you install Lottie-web?
Lottie-web can be installed via npm: npm install lottie-web, or loaded directly from CDN: https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js. The library has zero external dependencies and works in all modern browsers.
What are the key Lottie methods?
Key methods include: lottie.loadAnimation() to load and play an animation, animation.play() and animation.stop() for playback control, animation.goToAndStop() for seeking, animation.setSpeed() for rate control, and animation.destroy() for cleanup. The library also supports event listeners for lifecycle callbacks like ‘complete’, ’loopComplete’, and ’enterFrame’.
What is Bodymovin? Bodymovin is a free Adobe After Effects extension that exports animations as optimized JSON files compatible with Lottie. It supports most After Effects features including shape layers, masks, mattes, trim paths, text, and expressions. The extension is available through Adobe Exchange and the Creative Cloud desktop app.
Further Reading
- Lottie-web GitHub Repository – Source code, documentation, and examples
- LottieFiles Documentation – Community platform for Lottie animations and tools
- Bodymovin Plugin for After Effects – Export extension for After Effects
- Lottie for Android – Android rendering library
- Lottie for iOS – iOS rendering library (Swift and Objective-C)
