Awesome

Lottie Animation Component

Lottie Animation Component for Angular 8 or higher.

📦 Installation

npm install @fivethree/lottie lottie-web --save

# or if you are using yarn
yarn add @fivethree/lottie lottie-web

🔨 Usage

Import the module into your root application module:

import { NgModule } from '@angular/core';
import { LottieModule } from '@fivethree/lottie';

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

🦁 Animation

Add the lottie component to your template:

<fiv-lottie
  [params]="lottieParams"
  [width]="250"
  [height]="250"
  (animationCreated)="onAnimationCreated($event)"
></fiv-lottie>

You need to setup the lottieParams in your component:

import { Component } from '@angular/core';
import { LottieAnimation, LottieParams } from '@fivethree/lottie';

Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss']
})
export class HomePage {
  lottieParams: LottieParams = {
    path: 'assets/lottie/empty_box.json',
    renderer: 'canvas',
    loop: true
  };

  onAnimationCreated(animation: LottieAnimation) {
    animation.play();
    animation.setSpeed(0.8);
  }
}

Save your lottie files in the assets folder and change the path param, this way they are copied when building your application.