**Animations in Angular Using Lottie: Add Fun Confetti Effects to Your Project**
Animations can elevate user experience — turning a good app into a delightful one. In Angular, integrating animations is easier than ever with the help of libraries like Lottie. In this tutorial, you’ll learn:

What is Lottie and why use it?

How to integrate Lottie in an Angular app

How to trigger confetti animations on success events

**What is Lottie?**

Lottie is a library developed by Airbnb that renders Adobe After Effects animations in real-time on web and mobile platforms. These animations are exported as JSON using Bodymovin and are light, scalable, and interactive.

**Step 1: Install Lottie in Angular**

Install the necessary packages via npm:

npm install lottie-web
npm install ngx-lottie --save

**Set Up Lottie in Your Angular 19 Project**
Angular 19 encourages the use of standalone components instead of traditional NgModules. This means you'll import LottieModule directly into your root standalone component or feature component rather than inside an AppModule

**Create a Player Factory Function**

Create a helper function to provide the Lottie player:
ts

import player from 'lottie-web';

export function playerFactory() {
  return player;
}

In Angular 19, your AppComponent is typically a standalone component. Import and configure LottieModule there:

**app.component.ts**

import { Component } from '@angular/core';
import { LottieModule } from 'ngx-lottie';
import { playerFactory } from './lottie-player.factory';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    LottieModule.forRoot({ player: playerFactory }),
    // other imports can be included here...
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  // Your component logic here
}

**Create a Reusable Lottie Animation Component**

To keep your code clean, create a reusable component to display any Lottie animation.

lottie-animation.component.ts

import { Component, Input } from '@angular/core';
import { LottieModule } from 'ngx-lottie';

@Component({
  selector: 'app-lottie-animation',
  standalone: true,
  imports: [LottieModule],
  template: `
  
    <ng-lottie 
      [options]="lottieOptions" 
      [width]="width" 
      [height]="height">
    </ng-lottie>
  
})
export class LottieAnimationComponent {
  @Input() path!: string;      // URL or local path to animation JSON
  @Input() loop = false;
  @Input() autoplay = true;
  @Input() width = 300;
  @Input() height = 300;

  get lottieOptions() {
    return {
      path: this.path,
      loop: this.loop,
      autoplay: this.autoplay
    };
  }
}

**Use the Animation Component with Confetti**

Now, add a confetti animation that triggers on an event like a form submission or a successful action.
Example: Confetti on Button Click

<!-- success.component.html -->
>

<div *ngIf="showConfetti">
  <app-lottie-animation
    path="https://assets2.lottiefiles.com/packages/lf20_jbrw3hcz.json"
    [width]="300"
    [height]="300"
   [loop]="false"
   [autoplay]="true">
 </app-lottie-animation>
</div>

<button (click)="celebrate()">Celebrate </button>

success.component.ts

import { Component } from '@angular/core';
import { LottieAnimationComponent } from './lottie-animation.component';

@Component({
  selector: 'app-success',
  standalone: true,
  imports: [LottieAnimationComponent],
  templateUrl: './success.component.html'
})
export class SuccessComponent {
  showConfetti = false;

  celebrate() {
    this.showConfetti = true;

    setTimeout(() => {
      this.showConfetti = false;
    }, 3000); // Hide after 3 seconds
  }
}

**Note: Use Local Animation JSON**

Instead of loading animations from URLs, you can import animation JSON files locally for faster load and offline support:

Import JSON animation (adjust path as needed)
import confettiAnimation from '../assets/confetti.json';

@Component({
  // ...
})
export class SomeComponent {
  animationOptions = {
    animationData: confettiAnimation,
    loop: false,
    autoplay: true
  };
}

Use it in the template with [options] binding:

`<ng-lottie [options]="animationOptions" [width]="300" [height]="300"></ng-lottie>`

**Where to Find More Animations?**

https://lottiefiles.com/

https://lordicon.com/

Using Lottie with Angular 19’s standalone components is straightforward and powerful. You can easily add delightful animations — like confetti — that greatly enhance user experience without sacrificing performance.