Lottie animations are a great fit for Angular — smooth, scalable, and tiny compared to GIFs. This guide covers the two main approaches for Angular 17+.

Getting a Lottie File

First, grab a free .json or .lottie animation. IconKing is a free browser-based tool — preview, edit colors, and download animations with no account required. LottieFiles is also a good source for community animations.

Save the downloaded JSON to your src/assets/animations/ folder.

Option 1: ng-lottie (Recommended)

ng-lottie is an Angular-native wrapper that works well with the Angular component model.

npm install ng-lottie lottie-web

In your app.module.ts (or standalone component), import the module:

import { LottieModule } from "ng-lottie";
import { AnimationOptions } from "ngx-lottie";

@NgModule({
 imports: [
 LottieModule
 ]
})
export class AppModule {}

Then in your component:

import { Component } from "@angular/core";
import { AnimationOptions } from "ngx-lottie";

@Component({
 selector: "app-animation",
 template: `
 <ng-lottie
 [options]="options"
 width="200px"
 height="200px"
 ></ng-lottie>
 `
})
export class AnimationComponent {
 options: AnimationOptions = {
 path: "/assets/animations/success.json",
 loop: true,
 autoplay: true
 };
}

Option 2: lottie-web Directly

For full control without a wrapper, use lottie-web with AfterViewInit:

import { Component, ElementRef, AfterViewInit, ViewChild } from "@angular/core";
import lottie from "lottie-web";

@Component({
 selector: "app-lottie-raw",
 template: `<div #container style="width:200px;height:200px"></div>`
})
export class LottieRawComponent implements AfterViewInit {
 @ViewChild("container") container!: ElementRef;

 ngAfterViewInit() {
 lottie.loadAnimation({
 container: this.container.nativeElement,
 renderer: "svg",
 loop: true,
 autoplay: true,
 path: "/assets/animations/loader.json"
 });
 }
}

Lazy Loading Animations

For large animation files, load them only when the component enters the viewport using IntersectionObserver:

ngAfterViewInit() {
 const observer = new IntersectionObserver((entries) => {
 if (entries[0].isIntersecting) {
 lottie.loadAnimation({
 container: this.container.nativeElement,
 renderer: "svg",
 loop: true,
 autoplay: true,
 path: "/assets/animations/hero.json"
 });
 observer.disconnect();
 }
 });
 observer.observe(this.container.nativeElement);
}

Performance Tips

Keep JSON files under 100KB (compress in the editor at iconking.net before downloading). Use renderer: "svg" for best quality. Destroy animations on component destroy to prevent memory leaks: call anim.destroy() in ngOnDestroy().

Conclusion

For most Angular projects, ng-lottie is the cleanest approach. Use lottie-web directly when you need full API control. Either way, start by previewing and downloading your animation from IconKing or LottieFiles — pick something lightweight and your users will barely notice the extra asset.