Minimal customizable performance-stable Angular components for rendering After Effects animations. Compatible with Angular 9+.
## Packages
This monorepo contains two packages for rendering Lottie animations in Angular:
### 📦 [ngx-lottie](https://github.com/ngx-lottie/ngx-lottie/blob/master/docs/ngx-lottie.md)
The main package for rendering JSON-based Lottie animations using `lottie-web`.
```bash
npm i lottie-web ngx-lottie
```
**Features:**
- Multiple renderer support (SVG, Canvas, HTML)
- Advanced caching
- Server-side rendering support
- Tree-shakable architecture
[**Read full documentation →**](https://github.com/ngx-lottie/ngx-lottie/blob/master/docs/ngx-lottie.md)
---
### 🚀 [ngx-lottie/dotlottie](https://github.com/ngx-lottie/ngx-lottie/blob/master/docs/ngx-lottie-dotlottie.md)
Secondary package for rendering `.lottie` files using `@lottiefiles/dotlottie-web` with WebAssembly and Web Worker support.
```bash
npm i @lottiefiles/dotlottie-web ngx-lottie
```
**Features:**
- WebAssembly-powered rendering
- Web Worker support for better performance
- State machine support
- Smaller file sizes with `.lottie` format
[**Read full documentation →**](https://github.com/ngx-lottie/ngx-lottie/blob/master/docs/ngx-lottie-dotlottie.md)
## Compatibility with Angular Versions
| ngx-lottie |
Angular |
|
7.x
|
>= 8 < 13
|
|
8.x
|
13
|
|
9.x
|
14
|
|
10.x
|
15
|
|
11.x
|
17
|
|
12.x
|
18
|
|
13.x
|
19
|
|
20.x
|
20
|
|
21.x
|
21
|
## Which Package Should I Use?
| Use `ngx-lottie` when... | Use `ngx-lottie/dotlottie` when... |
| -------------------------------------- | ---------------------------------- |
| You have JSON animation files | You have `.lottie` files |
| You need maximum compatibility | You want smaller file sizes |
| You use advanced `lottie-web` features | You need Web Worker rendering |
| You need HTML renderer support | You need state machine support |
## License
MIT © [Artur Androsovych](https://github.com/arturovt)
