ngx-lottie

Quickly way to integrate Lottie-web component with Angular

Lottie

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! View documentation, FAQ, help, examples, and more at here.

Setup

Installation

Install lottie-web and ngx-lottie library from npm

npm install lottie-web @synapsium/ngx-lottie --save

Module usage

Add lottie.min.js into angular.json

"scripts": [
    "node_modules/lottie-web/build/player/lottie.min.js"
]

Add LottieModule to module

import { LottieModule } from '@synapsium/ngx-lottie';


@NgModule({
  ...
  imports: [
    ...
    LottieModule
  ]
})

How to use

Add the following tag in your html :

<lottie [path]="assets/home.json" 
        [loop]="true" animationEvent="click">
</lottie>