dotLottie Player

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

<dotlottie-player
  autoplay
  controls
  mode="bounce"
  loop
  src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
  style="width: 320px; margin: auto;"
  subframe
>
</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
      src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
      autoplay=""
      loop=""
      style={{
        width: '320px',
        margin: 'auto'
      }}
      subframe
    />
  </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
     src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
     autoplay
     loop
     subframe
   />
   </template>
   <script>
     export default {}
   </script>