AM LottiePlayer

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.

Choosing a build

Demo

Here is a demo, running on Next.js with TypeScript.

Installation

In HTML

• Import from CDN:

  • Full:

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

  • SVG:

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

  • Canvas:

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

  • Light:

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

• Import from node_modules the same way, e.g. /node_modules/@aarsteinmedia/dotlottie-player/dist/unpkg-full.js.

In JavaScript or TypeScript

1. Install using npm, pnpm, or yarn:

   pnpm add @aarsteinmedia/dotlottie-player
   

2. Import in your app (pick one build):

   import '@aarsteinmedia/dotlottie-player'
   // or:
   import '@aarsteinmedia/dotlottie-player/svg'
   import '@aarsteinmedia/dotlottie-player/canvas'
   import '@aarsteinmedia/dotlottie-player/light'
   

Because this is a Web Component, you're adding it to the global scope of your web app. Unlike modular components, it should only be imported once – preferably early in your app lifecycle.

If you're using TypeScript and want to import the component type, do it modular in addition to the global import:

import '@aarsteinmedia/dotlottie-player' // Do this once globally.
import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player' // Do this per file that needs the type.

⚠️ Note that this pattern may provoke linter errors, such as import/no-duplicates.

Usage

Add the dotlottie-player element to your markup and point the src to a Lottie animation of your choice:

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

Load animation

To set animations programmatically, use the load() method.

const player = document.querySelector('#find-me')
await player?.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')

Convert to dotLottie

(Full build only.)

If you have a Lottie JSON animation and want to convert it to a dotLottie file – to leverage compression, combine multiple animations, and maintain a tidy file library – you can use the convert() method. This will trigger a browser download.

If controls are visible, there’s also a convert button in the context menu on the right-hand side.

Convert to JSON

(Full build only.)

If you're debugging a dotLottie animation (e.g., expressions aren’t working as expected), you can convert it to JSON either using the convert() method or via the convert button if controls are enabled.

Combine animations

(Full build only.)

To combine multiple animations into a single dotLottie file, use the addAnimation() method. This also triggers a browser download. Source files can be either dotLottie or JSON, and the output will always be dotLottie:

const player = document.querySelector('#find-me')
await player?.addAnimation([
  { id: 'animation_1', url: '/url/to/animation_1.lottie' },
  { id: 'animation_2', url: '/url/to/animation_2.json', direction: -1, speed: 2 }
])

You can also use this method without any <dotlottie-player> on the page. As long as the script is loaded, dotLottiePlayer() is available as a global method.

await dotLottiePlayer().addAnimation([
  { id: 'animation_1', url: '/path/to/animation_1.lottie' },
  { id: 'animation_2', url: '/path/to/animation_2.json', direction: -1, speed: 2 }
])

The new file will automatically load the first animation when initialized. You can toggle between animations using the next() and prev() methods, or the navigation buttons in the controls.

Here’s how to control playback settings for multiple animations:

<dotlottie-player
  subframe
  id="find-me"
  src="/path/to/combined-animations.lottie"
>
</dotlottie-player>

const player = document.querySelector('#find-me')
player?.setMultiAnimationSettings([
  {
    autoplay: true
  },
  {
    autoplay: true,
    loop: true
  }
])

Angular

1. Import the component in app.component.ts.

import { Component } from '@angular/core'
import '@aarsteinmedia/dotlottie-player'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'your-app-name'
}

2. Add the player to your HTML template.

React.js / Next.js

Because this is a Web Component and not a React component, note that you must use the class attribute (not className) when assigning a CSS class.

If you prefer pure React logic, you may want to check out @aarsteinmedia/dotlottie-react.

import '@aarsteinmedia/dotlottie-player'

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

export default App

If you're using TypeScript and want to assign a ref, do it like this:

import { useRef } from 'react'
import '@aarsteinmedia/dotlottie-player'
import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player'

function App() {
  const animation = useRef<DotLottiePlayer | null>(null)
  return (
    <dotlottie-player
      subframe
      ref={animation}
      src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
    />
  )
}

export default App

Vue.js / Nuxt.js (using Vite.js)

1. Declare the dotlottie-player tag as a custom element, so Vue doesn’t try to resolve it as a Vue component.

In Vue.js

vite.config.ts:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag: string) => tag === 'dotlottie-player',
        }
      }
    })
  ]
})

In Nuxt.js

nuxt.config.ts:

export default defineNuxtConfig({
  vue: {
    compilerOptions: {
      isCustomElement: (tag: string) => tag === 'dotlottie-player',
    }
  }
})

2. Import the package once for its side effect (registers the custom element).

In Vue.js

main.ts:

import { createApp } from 'vue'
import '@aarsteinmedia/dotlottie-player'
import App from './App.vue'

createApp(App).mount('#app')

In Nuxt.js

Create a plugins folder in your root if it doesn't exist already, and add a client plugin named e.g. dotlottie-player.client.ts:

import '@aarsteinmedia/dotlottie-player'

export default defineNuxtPlugin(() => {})

3. Use the element in your templates:

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

Properties

Methods

Events

The following events are exposed and can be listened to via addEventListener calls.

WordPress Plugins

We've made a free WordPress plugin that works with Gutenberg Blocks, Elementor, Divi Builder and Flatsome UX Builder: AM LottiePlayer. It has all the functionality of this package, with a helpful user interface.

It's super lightweight – and only loads on pages where animations are used.

We've also made a premium WordPress plugin for purchase: AM LottiePlayer PRO. It has an easy-to-use GUI for combining and controlling multiple Lottie animations in a single file, converting JSON to dotLottie with drag-and-drop, and many more exclusive features.

License

GPL-2.0-or-later