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 Javascript or TypeScript:

1. Install package using npm or yarn.

npm install --save @ebcom/dotlottie-player

2. Import package in your code.

import '@ebcom/dotlottie-player';

Usage

Lottie-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="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 '@ebcom/dotlottie-player';

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 '@ebcom/dotlottie-player';

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 '@ebcom/dotlottie-player';

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

Project	Description
lottie-react	A React component for the Lottie Web player.
lottie-vue	A Vue component for the Lottie player.
svelte-lottie-player	Lottie player component for use with Svelte.
jLottie	jLottie is suitable as a general purpose lottie player, though implements a subset of the features in the core player - this approach leads to a tiny footprint and great performance.
lottie-interactivity	This is a small library to add scrolling, cursor interactivity and interaction chaining to your Lottie Animations.
lottie-js	The library consists of methods to map the Lottie JSON to the object model and interact with properties as well as manipulate them.

License

MIT License © LottieFiles.com