dotLottie Player

Vi kan med stolthet si at dette er den mest allsidige og effektive Lottie Player Web-komponenten på markedet – og den er gratis. Spilleren er kompatibel med SSR, og er fullstendig rammeverkagnostisk. I tillegg til å være en hurtig spiller som bruker lite RAM, inneholder komponenten også funksjonaliteten til å kombinere animasjoner, kontrollere hver animasjon i en enkelt fil og konvertere JSON-animasjoner til dotLottie.

Installasjon

HTML

• Lastet inn via CDN:

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

• Lastet inn fra den lokale node_modules-mappa:

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

JavaScript eller TypeScript

1. Installer pakken med pnpm, npm eller yarn.

   npm install --save @aarsteinmedia/dotlottie-player

2. Importer pakken inn i koden din.

   import '@aarsteinmedia/dotlottie-player'

I bruk

Legg til elementet dotlottie-player i koden din, og pek den til ei Lottiefil du vil bruke.

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

Du kan også laste inn animasjoner programmatisk.

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. Oppdater tabellen over utvidelser i nuxt.config.js, i prosjektmappa di.

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

2. Lag ei mappe for utvidelser i prosjektmappa di dersom dette ikke finnes fra før, og lag ei fil som heter f. eks. lottie-player.js med følende innhold:

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

3. Komponenten kan nå brukes på sidene dine, eller i et template – uten å måtte importere noe.

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