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
- Installer pakken med npm eller yarn.
npm install --save @johanaarstein/dotlottie-player
- 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
- Oppdater tabellen over utvidelser i nuxt.config.js, i prosjektmappa di.
plugins: [ { src: '~/plugins/lottie-player', mode: 'client' } ]
- 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'
- 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>