Usage

dotLottie-Player

Add the element dotlottie-player and set the src property to a URL pointing to a .lottie or .json file.
<dotlottie-player
autoplay
controls
loop
mode="normal"
src="https://assets2.lottiefiles.com/dotlotties/dlf10_oehbsgal.lottie"
style="width: 320px"
>
</dotlottie-player>
You may set and load animations programmatically as well.
<dotlottie-player autoplay controls loop mode="normal" style="width: 320px"> </dotlottie-player>
const player = document.querySelector('dotlottie-player');
player.load('https://assets2.lottiefiles.com/dotlotties/dlf10_oehbsgal.lottie');

Usage example in ReactJS

1 - import the player and use as follows
import '@dotlottie/player-component';
function App() {
return (
<div className="App">
<dotlottie-player
src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
autoplay
loop
style=
/>
</div>
);
}
export default App;

Usage example in ReactJS + Typescript

1 - import as follows
import '@dotlottie/player-component';
function App() {
return (
<div className="App">
<dotlottie-player
src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
autoplay
loop
/>
</div>
);
}
export default App;
2 - create a global.d.ts file in your src folder and add the code below
declare namespace JSX {
interface IntrinsicElements {
"dotlottie-player": any;
}
}

Usage example in NuxtJS / VueJS

1 - update the plugins array in nuxt.config.js file in your root as follows
plugins: [{ src: '~/plugins/lottie-player', mode: 'client' }];
2 - create a folder plugins in your root if it doesnt already exist, add a file lottie-player.js with the following content
import * as LottiePlayer from '@dotlottie/player-component';
3 - the component can now be used in your pages or components template tag as follows without any import necessary
<template>
<dotlottie-player src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie" autoplay loop />
</template>
<script>
export default {};
</script>
  • Note for vueJS the library/player must be declared as a client side plugin module.

Usage example for loading .json animation objects

import data from './animation.json';
import('@dotlottie/player-component');ht
<dotlottie-player
src={JSON.stringify(data)}
autoplay
loop={loop}
controls={true}
style={{ height: '100%', width: loop ? '100%' : '20%' }}
/>

Usage with Lottie-Interactivity

Easily add interactions to your .lottie animations with our open-source library lottie-interactivity.
You may be already familiar with this library if you’ve previously added interactions to your animations! Getting interactions up and running with .lottie looks very similiar:
HTML:
<dotlottie-player id="player" src="..."> </dotlottie-player>
Javascript:
const player = document.getElementById('player');
player.addEventListener('ready', () => {
LottieInteractivity.create({
player: player.getLottie(),
mode:"cursor",
actions: [
{
type: "click",
forceFlag: true
}
]
});
});