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 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
        }
    ]
    });
});