dotlottie-player Web Component

This is a Web Component for easily embedding and playing dotLottie animations on websites.

Demo

• [TODO]

Documentation

• View documentation

Installation

In HTML, import from CDN or from the local Installation:

Lottie Player:

• Import from CDN.

<script src="https://unpkg.com/@dotlottie/player-component@1.0.0/dist/dotlottie-player.js"></script>

• Import from local node_modules directory.

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

In Javascript or TypeScript:

1. Install package using npm or yarn.

npm install --save @dotlottie/player-component

2. Import package in your code.

import '@dotlottie/player-component';

Usage

Lottie-Player

Add the element dotlottie-player and set the src property to a URL pointing to a .lottie file.

<dotlottie-player
  autoplay
  controls
  loop
  mode="normal"
  src="http://dotlottieio.s3-website-us-east-1.amazonaws.com/sample_files/animation-external-image.lottie"
  style="width: 320px"
>
</dotlottie-player>

You may set and load animations programmatically as well.

<dotlottie-player autoplay controls loop mode="normal" style="width: 320px"> </dotlottie-player>

const player = document.querySelector('dotlottie-player');
player.load('http://dotlottieio.s3-website-us-east-1.amazonaws.com/sample_files/animation-external-image.lottie');

Usage example in ReactJS

1 - import the player and use as follows

import '@dotlottie/player-component';

function App() {
  return (
    <div className="App">
      <dotlottie-player
        src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
        autoplay
        loop
        style={{ height: '100%', width: '100%' }}
      />
    </div>
  );
}

export default App;

Usage example in ReactJS + Typescript

1 - import as follows

import '@dotlottie/player-component';

function App() {
  return (
    <div className="App">
      <dotlottie-player
        src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie"
        autoplay
        loop
        style={{ height: '100%', width: '100%' }}
      />
    </div>
  );
}

export default App;

2 - create a global.d.ts file in your src folder and add the code below

declare namespace JSX {
  interface IntrinsicElements {
    "dotlottie-player": any;
  }
}

Usage example in NuxtJS / VueJS

1 - update the plugins array in nuxt.config.js file in your root as follows

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

2 - create a folder plugins in your root if it doesnt already exist, add a file lottie-player.js with the following content

import * as LottiePlayer from '@dotlottie/player-component';

3 - the component can now be used in your pages or components template tag as follows without any import necessary

<template>
  <dotlottie-player src="https://assets2.lottiefiles.com/dotlotties/dlf10_l12sw9oo.lottie" autoplay loop />
</template>
<script>
export default {};
</script>

• note for vueJS the library/player must be declared as a client side plugin module.

Properties

Property	Attribute	Description	Type	Default
autoplay	autoplay	Autoplay animation on load.	boolean	false
background	background	Background color.	string	undefined
controls	controls	Show controls.	boolean	false
count	count	Number of times to loop animation.	number	undefined
direction	direction	Direction of animation.	number	1
hover	hover	Whether to play on mouse hover.	boolean	false
loop	loop	Whether to loop animation.	boolean	false
mode	mode	Play mode.	PlayMode.Bounce | PlayMode.Normal	PlayMode.Normal
renderer	renderer	Renderer to use.	"svg"	'svg'
speed	speed	Animation speed.	number	1
src (required)	src	URL to .lottie file.	string	undefined

Methods

load(src: string) => void

Load (and play) a given Lottie animation.

Parameters

Name	Type	Description
src	string	URL to a .lottie file.

Returns

Type: void

pause() => void

Pause animation play.

Returns

Type: void

play() => void

Start playing animation.

Returns

Type: void

setDirection(value: number) => void

Animation play direction.

Parameters

Name	Type	Description
value	number	Direction values.

Returns

Type: void

setLooping(value: boolean) => void

Sets the looping of the animation.

Parameters

Name	Type	Description
value	boolean	Whether to enable looping. Boolean true enables looping.

Returns

Type: void

setSpeed(value?: number) => void

Sets animation play speed.

Parameters

Name	Type	Description
value	number	Playback speed.

Returns

Type: void

stop() => void

Stops animation play.

Returns

Type: void

seek(value: number | string) => void

Seek to a given frame. Frame value can be a number or a percent string (e.g. 50%).

Returns

Type: void

snapshot(download?: boolean) => string

Snapshot the current frame as SVG. If 'download' argument is boolean true, then a download is triggered in browser.

Returns

Type: string

toggleLooping() => void

Toggles animation looping.

Returns

Type: void

togglePlay() => void

Toggle playing state.

Returns

Type: void

Events

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

Name	Description
load	Animation data is loaded.
error	An animation source cannot be parsed, fails to load or has format errors.
ready	Animation data is loaded and player is ready.
play	Animation starts playing.
pause	Animation is paused.
stop	Animation is stopped.
freeze	Animation is paused due to player being invisible.
loop	An animation loop is completed.
complete	Animation is complete (all loops completed).
frame	A new frame is entered.

Styling

Custom property	Description	Default
--dotlottie-player-toolbar-height	Toolbar height	35px
--dotlottie-player-toolbar-background-color	Toolbar background color	transparent
--dotlottie-player-toolbar-icon-color	Toolbar icon color	#999
--dotlottie-player-toolbar-icon-hover-color	Toolbar icon hover color	#222
--dotlottie-player-toolbar-icon-active-color	Toolbar icon active color	#555
--dotlottie-player-seeker-track-color	Seeker track color	#CCC
--dotlottie-player-seeker-thumb-color	Seeker thumb color	rgba(0, 107, 120, 0.8)

License

MIT License © LottieFiles.com