https://github.com/fivethree-team/lottie

🦁 Lottie Animation Component
https://github.com/fivethree-team/lottie

angular component lottie

Last synced: 4 months ago
JSON representation

🦁 Lottie Animation Component

• Host: GitHub
• URL: https://github.com/fivethree-team/lottie
• Owner: fivethree-team
• License: mit
• Created: 2019-02-09T19:23:51.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2020-07-10T12:55:29.000Z (over 5 years ago)
• Last Synced: 2025-01-31T15:24:23.232Z (about 1 year ago)
• Topics: angular, component, lottie
• Language: TypeScript
• Homepage:
• Size: 306 KB
• Stars: 12
• Watchers: 2
• Forks: 7
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-ionic-4 - Lottie Animation
• Awesome-Ionic - Lottie Animation
• awesome-ionic - Lottie Animation

README

          
# Lottie Animation Component

[![npm version](https://badge.fury.io/js/%40fivethree%2Flottie.svg)](https://www.npmjs.com/@fivethree/lottie)

[![License](https://img.shields.io/badge/License-MIT-green.svg)](https://github.com/fivethree-team/lottie/blob/master/LICENSE)

Lottie Animation Component for Angular 8 or higher.

| Angular | @fivehtree/core |

| ------- | --------------- |

| 8/9     | 0.3.x+          |

| 7       | 0.2.x           |

## 📦 Installation

```console

npm install @fivethree/lottie lottie-web --save

# or if you are using yarn

yarn add @fivethree/lottie lottie-web

```

## 🔨 Usage

Import the module into your root application module:

```typescript

import { NgModule } from '@angular/core';

import { LottieModule } from '@fivethree/lottie';

@NgModule({

  imports: [LottieModule]

})

export class AppModule {}

```

## 🦁 Animation

Add the lottie component to your template:

```html

```

You need to setup the `lottieParams` in your component:

```typescript

import { Component } from '@angular/core';

import { LottieAnimation, LottieParams } from '@fivethree/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.