Usage

Describes how to use the Lottie-Player component on a web page and with various JavaScript libraries.

On a Web Page

Lottie-Player

To use lottie-player on a web page, add the element lottie-player and set the src property to a URL containing a valid Bodymovin JSON file.

<lottie-player
  autoplay
  controls
  loop
  mode="normal"
  src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
  style="width: 320px"
 >
</lottie-player>

To programmatically set and load animations, use:

<lottie-player autoplay controls loop mode="normal" style="width: 320px">
</lottie-player>

const player = document.querySelector("lottie-player");
player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");

// or load via a Bodymovin JSON string/object
player.load(
  '{"v":"5.3.4","fr":30,"ip":0,"op":38,"w":315,"h":600,"nm":"new", ... }'
);

Telegram Sticker Player (TGS-Player)

To use the tgs-player on a web page, add the element tgs-player and set the src property to a URL pointing to a valid TGS JSON file.

<tgs-player autoplay loop mode="normal" src="https//domain/example.tgs">
</tgs-player>

With ReactJS & VueJS

Import the player using one of the following methods:

import * as LottiePlayer from "@lottiefiles/lottie-player";

or

require("@lottiefiles/lottie-player");

se as follows:

<lottie-player
  autoplay
  controls
  loop
  mode="normal"
  src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
  style="width: 320px"
></lottie-player>

With Typescript ReactJS

Import the player using one of the following methods:

import * as LottiePlayer from "@lottiefiles/lottie-player";

or

require("@lottiefiles/lottie-player");

Typescript projects require an extra step to use Lottie-Player. You must declare the lottie-player component as a JSX intrinsic element.

Create a declarations.d.ts file in the root of your project and add the following code to it.

declare namespace JSX {
  interface IntrinsicElements {
    "lottie-player": any;
  }
}

Use Lottie-Player as follows:

<lottie-player
  autoplay
  controls
  loop
  mode="normal"
  src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
  style="width: 320px"
></lottie-player>

With NuxtJS

Create a lottie-player.js file in project root inside a folder named plugins. Add the following code to this file:

import * as LottiePlayer from "@lottiefiles/lottie-player";

The player script must be rendered only on the browser/client-side. Accordingly, configure nuxtjs to load the script on the client-side only.

Open the nuxt.config.js file and adjust the plugins array as follows:

plugins: [{ src: "~/plugins/lottie-player.js", mode: "client" }],

Use the player as follows inside any component:

<lottie-player
  autoplay
  controls
  loop
  style="width:400px"
  src="https://assets3.lottiefiles.com/packages/lf20_RItkEz.json"
  speed="1"
  debug
></lottie-player>

With NextJS

You must declare the lottie-player component as a JSX intrinsic element.

Create a declarations.d.ts file in the root of your project and add the following code to it.

declare namespace JSX {
  interface IntrinsicElements {
    "lottie-player": any;
  }
}

Similar to the process in NuxtJS, in Server-Side Rendering (SSR) mode, declare the library as a client side module. To complete this task, import the library within a react useEffect hook.

import React, { useRef } from "react";

export default function Home() {
  const ref = useRef(null);
  React.useEffect(() => {
    import("@lottiefiles/lottie-player");
  });
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <lottie-player
          id="firstLottie"
          ref={ref}
          autoplay
          controls
          loop
          mode="normal"
          src="https://assets4.lottiefiles.com/packages/lf20_gb5bmwlm.json"
          style={{ width: "300px", height: "300px" }}
        ></lottie-player>
      </main>
    </div>
  );
}