ngx-lottie-view

Lottie component for Angular

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile!

Install

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

Usage

1. Import module

 
import { NgxLottieViewModule } from 'ngx-lottie-view';
 
@NgModule({
  declarations: [
    YourComponent
  ],
  imports: [
    ...,
    NgxLottieViewModule // Import NgxLottieViewModule
  ],
  bootstrap: [YourComponent]
})
export class YourModule { }
 

1. Add component

<ngx-lottie-view path="your-json-path.json"
                 style="width: 200px; height: 200px;">
</ngx-lottie-view>

APIs

Props

Prop	Description	Default
path	The relative path to the animation object	null
loop	A boolean flag indicating whether or not the animation should loop.	true
render	'svg' / 'canvas' / 'html' to set the renderer	svg
autoPlay	true / false it will start playing as soon as it is ready	true

Events

Output	Description
animationLoad	DOMLoaded
animationComplete	complete