dotlottie-player Web Component

This is a Web Component for easily embedding and playing dotLottie animations on websites.

What's dotLottie?

dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie".

Read more about .lottie here!

Documentation

View the full documentation

Installation

In HTML, import from CDN or from the local Installation

Lottie Player

• Import from CDN.

<script type="module" src="https://unpkg.com/@dotlottie/[email protected]/dist/dotlottie-player.mjs" ></script>

• Import from local node_modules directory.

<script type="module" src="/node_modules/@dotlottie/player-component/dist/dotlottie-player.mjs"></script>

In Javascript or TypeScript

1. Install package using npm or yarn.

npm install --save @dotlottie/player-component

2. Import package in your code.

import '@dotlottie/player-component';

Usage

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
  playMode="normal"
  src="http://dotlottieio.s3-website-us-east-1.amazonaws.com/sample_files/animation-external-image.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('http://dotlottieio.s3-website-us-east-1.amazonaws.com/sample_files/animation-external-image.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={{ height: '100%', width: '100%' }}
      />
    </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
        style={{ height: '100%', width: '100%' }}
      />
    </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.

Full documentation on player properties, methods, events and styling for the dotlottie-player are available here.

Community & Support

• Github issues. For bugs and errors you encounter using this player.
• Discord. For hanging out with the community and sharing your awesome Lottie animations!

Our other Lottie related libraries

License

MIT License © LottieFiles.com