Skip to content

An Ember.js component to render lottie after effects animations.

License

Notifications You must be signed in to change notification settings

qonto/ember-lottie

Repository files navigation

ember-lottie-illustration

ember-lottie

CI Latest NPM release

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.