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.