dotLottie Player

We proudly claim this to be the most versatile, lightweight and efficient Lottie Player Web Component available. It's compatible with server side rendering, and completely framework agnostic. In addition to being a fast-loading, low-RAM-using player it also contains the functionality to combine animations, control each animation in a single file, and convert JSON-animations to dotLottie.

Installation

In HTML

• Import from CDN:

  <script src="https://unpkg.com/@aarsteinmedia/dotlottie-player@latest/dist/index.js"></script>

• Import from local node_modules directory:

  <script src="/node_modules/@aarsteinmedia/dotlottie-player/dist/index.js"></script>

In JavaScript or TypeScript

1. Install package using pnpm, npm or yarn.

   pnpm install --save @aarsteinmedia/dotlottie-player

2. Import package in your code.

   import '@aarsteinmedia/dotlottie-player'

Usage

Add the element dotlottie-player to you code and point it to a Lottie file of your choice.

<dotlottie-player
  autoplay
  controls
  loop
  subframe
  mode="bounce"
  src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
  style="width: 320px; margin: auto;"
>
</dotlottie-player>

You may set and load animations programmatically as well.

const player = document.querySelector('dotlottie-player')
player.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')

React.js / Next.js

import '@aarsteinmedia/dotlottie-player'

function App() {
return (
  <div className="App">
    <dotlottie-player
      autoplay
      loop
      subframe
      src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
      style={{
        width: '320px',
        margin: 'auto'
      }}
    />
  </div>
)
}

export default App

Nuxt.js / Vue.js

1. Update the array of plugins in nuxt.config.js file in your root.

   plugins: [{
     src: '~/plugins/lottie-player',
     mode: 'client'
   }]

2. Create a plugin folder in your root if it doesnt exist already, add a file named e. g. lottie-player.js with the following content:

   import * as DotLottiePlayer from '@aarsteinmedia/dotlottie-player'

3. The component can now be used in your pages or components template tag like below – without any imports necessary.

   <template>
   <dotlottie-player
     autoplay
     loop
     subframe
     src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
   />
   </template>
   <script>
     export default {}
   </script>