Usage
Describes how to use the Lottie-Player component on a web page and with various JavaScript libraries.
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", ... }'
);
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>
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>
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>
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>
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>
);
}
Last modified 1yr ago