@johanaarstein/player-component v1.2.7

dotlottie-player Web Component

This fork gives option to alter aspect ratio.

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

Methods

load(src: string) => void

Load (and play) a given Lottie animation.

Parameters

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

Returns

Type: void

setLooping(value: boolean) => void

Sets the looping of the animation.

Parameters

Returns

Type: void

setSpeed(value?: number) => void

Sets animation play speed.

Parameters

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.

Styling

License

MIT License © LottieFiles.com