Next Planet of Monkeys

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

    1.4.2 • Public • Published

    Lottie Animation Component

    npm version License

    Lottie Animation Wrapper Component for Angular 7 or higher. no ionic support.

    (Originally forked from: fivethree-team/lottie, this fork is independent and can't get updated in front of forked origin )

    📦 Installation

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

    🔨 Usage

    Import the module into your root application module:

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

    🦄 Animation

    Add the lottie component to your template:

    <s1-lottie
      [options]="lottieParams"
      [width]="500"
      [height]="500"
      [optimize]="false"
      (animationCreated)=onAnimationCreated($event)>
    </s1-lottie>

    You need to setup the lottieParams in your component:

    import { Component } from '@angular/core';
    import { S1LottieConfig } from '@sentinel-one/s1-lottie';
    import { AnimationItem } from 'lottie-web';
    
    Component({
      selector: 'app-home',
      templateUrl: 'home.page.html',
      styleUrls: ['home.page.scss'],
    })
    export class HomePage {
    
      lottieParams: S1LottieConfig = {
        path: 'assets/lottie/empty_box.json',
        renderer: 'canvas',
        loop: true
      };
    
      onAnimationCreated(animation: AnimationItem) {
        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.

    ** We also support dynamic loading of new animation files, e.g:

      changeAnimation() {
        this.lottieParams = {
          ...this.lottieParams,
          path: 'assets/lottie/s1_test.json'
        };
        setTimeout(()=> {
          this.lottieParams = {
            ...this.lottieParams,
            path: 'assets/lottie/s1_logo.json'
          };
        }, 600)
      }

    API

    • width: number - if not specified, the player will take 100% of its host.
    • height: if not specified, the player will take 100% of its host.
    • options: of type S1LottieConfig mandatory for setting the Lottie player configuration.
    • optimize: boolean, if true, will load the lottie instance animation outside of Angular zone to escape change detection, for better performance.

    Contribute:

    We'll be happy to get issues/PRs/ from you, please review the TODO.md for future planning and follow the CONTRIBUTING.md.

    Internal (requires permissions): build and publish to npm:

    • To build before publishing run: npm run build:prod:plugin
    • publish from dist/@sentinel-one/s1-lottie (npm publish --access public)

    Install

    npm i @sentinel-one/s1-lottie

    DownloadsWeekly Downloads

    277

    Version

    1.4.2

    License

    MIT

    Unpacked Size

    204 kB

    Total Files

    29

    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