Neurotic and Probably Misinformed

    This package has been deprecated

    Author message:

    0.1.2

    @sentinel-one/lottie
    TypeScript icon, indicating that this package has built-in type declarations

    0.1.2 • Public • Published

    Lottie Animation Component

    npm version License

    Lottie Animation Wrapper Component for Angular 7 or higher.

    (Originally forked from: fivethree-team/lottie)

    📦 Installation

    TBD as ng add soon
    
    npm i @sentinel-one/lottie lottie-web --save

    🔨 Usage

    Import the module into your root application module:

    import { NgModule } from '@angular/core';
    import { LottieModule } from '@sentinel-one/lottie';
    
    @NgModule({
        imports: [
            LottieModule
        ]
    })
    export class AppModule {}

    🦁 Animation

    Add the lottie component to your template:

    <fiv-lottie [params]="lottieParams" [width]="250" [height]="250" (animationCreated)=onAnimationCreated($event)></fiv-lottie>

    You need to setup the lottieParams in your component:

    import { Component } from '@angular/core';
    import { LottieAnimation, LottieParams } from '@sentinel-one/lottie';
    
    Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
    
      lottieParams: LottieParams = {
        path: 'assets/lottie/empty_box.json',
        renderer: 'canvas',
        loop: true
      };
    
      onAnimationCreated(animation: LottieAnimation) {
        animation.play();
        animation.setSpeed(0.8);
      }
    }

    Save your lottie files in the assets folder and change the path param, this way they are copied when building your application.

    Install

    npm i @sentinel-one/lottie

    DownloadsWeekly Downloads

    3

    Version

    0.1.2

    License

    MIT

    Unpacked Size

    80.9 kB

    Total Files

    26

    Last publish

    Collaborators

    • janhora
    • npm_service_s1
    • sivanisentinel
    • sentinelone
    • assafa
    • ofir.fridman
    • ozgonen
    • lironhazan
    • irenav
    • yoni12ab
    • koralbenami
    • liorl3009
    • gal.falah
    • amir_barak
    • matans
    • jp-s1
    • vovadev
    • yamarbel
    • shlomim-s1
    • yoavsc
    • frontend-npm-group
    • maayanb