Next Planet of Monkeys

    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';
        imports: [
    export class AppModule {}

    🦄 Animation

    Add the lottie component to your template:


    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';
      selector: 'app-home',
      templateUrl: '',
      styleUrls: [''],
    export class HomePage {
      lottieParams: S1LottieConfig = {
        path: 'assets/lottie/empty_box.json',
        renderer: 'canvas',
        loop: true
      onAnimationCreated(animation: AnimationItem) {;

    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 = {
          path: 'assets/lottie/s1_test.json'
        setTimeout(()=> {
          this.lottieParams = {
            path: 'assets/lottie/s1_logo.json'
        }, 600)


    • 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.


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

    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)


    npm i @sentinel-one/s1-lottie

    DownloadsWeekly Downloads






    Unpacked Size

    204 kB

    Total Files


    Last publish


    • 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