dotLottie Player

Dette begynte som en fork av @dotlottie/player-component, som vi lagde hovdesakelig for bedre å kunne justere rendering og bildeutsnitt. Siden da har vi lagt til noen funksjoner her og justert noen innstillinger der, og nå er dette den mest allsidige og effektive Lottie webkomponenten på internett. Den er kompatibel med SSR, og veier en brøkdel av hva den gjorde i begynnelsen.

Installasjon

HTML

• Lastet inn via CDN:

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

• Lastet inn fra den lokale node_modules-mappa:

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

JavaScript eller TypeScript

1. Installer pakken med npm eller yarn.

   npm install --save @johanaarstein/dotlottie-player

2. Importer pakken inn i koden din.

   import '@johanaarstein/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
  subframe
  src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
  style="width: 320px; margin: auto;"
>
</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 '@johanaarstein/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'
        }}
      />
    </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 LottiePlayer from '@johanaarstein/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
     />
   </template>
   <script>
     export default {}
   </script>