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!
npm install ngx-lottie-view lottie-web --save
- Import module
import { NgxLottieViewModule } from 'ngx-lottie-view';
@NgModule({
declarations: [
YourComponent
],
imports: [
...,
NgxLottieViewModule // Import NgxLottieViewModule
],
bootstrap: [YourComponent]
})
export class YourModule { }
- Add component
<ngx-lottie-view path="your-json-path.json"
style="width: 200px; height: 200px;">
</ngx-lottie-view>
Prop | Description | Default |
---|---|---|
path | The relative path to the animation object | null |
loop | A boolean/number 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 |
Output | Description |
---|---|
animationLoad | DOMLoaded |
animationComplete | complete |