DEV Community

Fazal Shah
Fazal Shah

Posted on

How to Add Lottie Animations to Angular (2025 Guide)

#angular #javascript #animation #frontend

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
Enter fullscreen mode Exit fullscreen mode

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 {}
Enter fullscreen mode Exit fullscreen mode

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
  };
}
Enter fullscreen mode Exit fullscreen mode

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"
    });
  }
}
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)