@qonto/ember-lottie NPM

ember-lottie-illustration

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
  }
}