Exciting news!Announcing our $4.6M Series Seed. Learn more
Socket
LoveBlogFAQ
Install
Log in

@sentinel-one/s1-lottie

Package Overview
Dependencies
0
Maintainers
20
Versions
15
Issues
File Explorer

Advanced tools

@sentinel-one/s1-lottie

Lottie Animation Component for Angular apps

    1.4.2latest

Version published
Maintainers
20
Yearly downloads
44,036
increased by45.74%

Weekly downloads

Readme

Source

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)

Keywords

Socket

Product

Subscribe to our newsletter

Get open source security insights delivered straight into your inbox. Be the first to learn about new features and product updates.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc