dotLottie Player
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. In addition to being a fast-loading, low-RAM-using player it also contains the functionality to combine animations, control each animation in a single file, and convert JSON-animations to dotLottie.
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
- Install package using pnpm, npm or yarn.
npm install --save @aarsteinmedia/dotlottie-player
- Import package in your code.
import '@aarsteinmedia/dotlottie-player'
Usage
Add the element dotlottie-player
to you code and point it to a Lottie file of your choice.
<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
- Update the array of plugins in nuxt.config.js file in your root.
plugins: [{ src: '~/plugins/lottie-player', mode: 'client' }]
- 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'
- 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>