TypeScript HTML JavaScript CSS Ruby
Switch branches/tags
Nothing to show
Clone or download
Dave Coffin
Dave Coffin fixed docs
Latest commit baf55cd Jul 24, 2018
Failed to load latest commit information.
demo-ng bump for 4x Apr 23, 2018
demo update: demo Jun 18, 2018
sample-effects working Feb 2, 2017
screens Add assets screens Jan 23, 2018
src fixed docs Jul 24, 2018
.gitignore bump for 4x Apr 23, 2018
.prettierrc bump for 4x Apr 23, 2018
LICENSE init Feb 2, 2017
README.md fixed docs Jul 24, 2018



NativeScript plugin to expose Airbnb Lottie for awesome animations.

npm npm

Uses Airbnb Lottie for Android and iOS Lottie for iOS.

Demo Screen

The .gif does not do the fluid animations justice



To install execute:

NativeScript 4x

tns plugin add nativescript-lottie

NativeScript 3x-

tns plugin add nativescript-lottie@1.4.0


Plain {N}


    xmlns:Lottie="nativescript-lottie" navigatingTo="navigatingTo" class="page">
        <Lottie:LottieView src="PinJump.json" height="130" loop="true" autoPlay="true" loaded="yourLoadedEvent" />


import { LottieView } from "nativescript-lottie";

public yourLoadedEvent(args) {
    this._myLottie: LottieView = args.object; /// this is the instance of the LottieAnimationView

{N} with Angular


    <LottieView width="100" height="150" [src]="src" [loop]="loop" [autoPlay]="autoPlay" (loaded)="lottieViewLoaded($event)">     </LottieView>


import { Component } from '@angular/core';
import { registerElement } from 'nativescript-angular';
import { LottieView } from 'nativescript-lottie';

registerElement('LottieView', () => LottieView);

  templateUrl: 'home.component.html',
  moduleId: module.id
export class HomeComponent {
  public loop: boolean = true;
  public src: string;
  public autoPlay: boolean = true;
  public animations: Array<string>;

  private _lottieView: LottieView;

  constructor() {
    this.animations = ['Mobilo/A.json', 'Mobilo/D.json', 'Mobilo/N.json', 'Mobilo/S.json'];
    this.src = this.animations[0];

  lottieViewLoaded(event) {
    this._lottieView = <LottieView>event.object;


🔥 You can find animations in the sample-effects folder.


Place your animation files in the NS app's app_resources/android/src/main/assets folder.


Place your animations files in your app/App_Resources/iOS/ folder.

Properties (bindable)

Property Type Default Description
autoPlay boolean false Start LottieView animation on load if true.
loop boolean false Loop continuously animation if true.
src string null Animation path to .json file.
theme { keyPath: string[], value: string }[] null keyPath is the path to layer in your json file (i.e in After Effect) and value is the layer color


Property Type Default Description
progress number 0 Get/set the progress of the animation.
speed number 1 Get/set the animation's speed


Method Return Parameters Description
playAnimation void None Plays the animation for the LottieView instance.
cancelAnimation void None Pauses the animation for the LottieView instance.
isAnimating boolean None Returns true if the LottieView is animating, else false.


Brad Martin Nathan Walker Jean-Baptiste Aniel HamdiWanis
bradmartin NathanWalker rhanb HamdiWanis