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
Permalink
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

README.md

NativeScript-Lottie

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

LottieView

Installation

To install execute:

NativeScript 4x

tns plugin add nativescript-lottie

NativeScript 3x-

tns plugin add nativescript-lottie@1.4.0

Usage

Plain {N}

XML

<Page
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:Lottie="nativescript-lottie" navigatingTo="navigatingTo" class="page">
    <StackLayout>
        <Lottie:LottieView src="PinJump.json" height="130" loop="true" autoPlay="true" loaded="yourLoadedEvent" />
    </StackLayout>
</Page>

TS

import { LottieView } from "nativescript-lottie";

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

{N} with Angular

XML

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

Component

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

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

@Component({
  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;
  }
}

Assets

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

Android

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

iOS

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

Properties

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

Methods

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.

Contributors

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