ember-lottie

Render lottie after effects animations in Ember.js.

Compatibility

• Ember.js v3.28 or above
• Ember CLI v3.28 or above
• Node.js v18 or above
• TypeScript v5 or above

Installation

ember install @qonto/ember-lottie

Usage

<Lottie
  @name="empty state"
  @animationData={{this.animationData}}
  @path="/data.json"
  @loop={{false}}
  @autoplay={{false}}
  @speed={{500}}
  @containerId={{this.id}}
  @onDataReady={{this.args.onDataReady}}
  @fetchOptions={{this.fetchOptions}}
/>

API reference

Arguments

| Argument | Type | Description | | ------------- | -------- | ----------------------------------------------------------------------------------------------- | | name | string | animation name for future reference | | animationData | object | an object with the exported animation data (mandatory at least one: animationData or path) | | path | string | the relative path to the animation object (mandatory at least one: animationData or path) | | loop | boolean | by default at true, the animation runs forever, at false, the animation is played only once | | autoplay | boolean | by default to true, it will play as soon as it's loaded | | speed | number | 1 is normal speed | | containerId | string | the dom element id on which to render the animation (mandatory) | | onDataReady | function | a function that triggers the Lottie when you want it | | onError | function | a function that can be used as a callback when fetching the lottie file throws | | fetchOptions | object | any additional params to pass to fetch function (eg: {credentials: "include"}) |

TypeScript usage

The Lottie component has proper Glint types, which allow you to get strict type checking in your templates when using TypeScript.

Unless you are using strict mode templates (via first class component templates), you need to import the addon's Glint template registry entries as described in the Using Addons documentation:

// e.g. types/glint.d.ts
import "@glint/environment-ember-loose";
import type LottieRegistry from "@qonto/ember-lottie/template-registry";

declare module "@glint/environment-ember-loose/registry" {
  export default interface Registry
    extends LottieRegistry /* other addon registries */ {
    // local entries
  }
}

Contributing

See the Contributing guide for details.

License

This project is licensed under the MIT License.