thedemodev / lottie-player Goto Github PK

This is a Web Component for easily embedding and playing Lottie animations and the Lottie-based Telegram Sticker (tgs) animations in websites.

• Basic usage examples
• Scrolling effects demo

• View documentation

• Import from CDN.

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/lottie-player.js"></script>

• Import from local node_modules directory.

<script src="/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js"></script>

• Import from CDN.

<script src="https://unpkg.com/@lottiefiles/[email protected]/dist/tgs-player.js"></script>

• Import from local node_modules directory.

<script src="/node_modules/@lottiefiles/lottie-player/dist/tgs-player.js"></script>

1. Install package using npm or yarn.

npm install --save @lottiefiles/lottie-player

2. Import package in your code.

import "@lottiefiles/lottie-player";

Add the element lottie-player and set the src property to a URL pointing to a valid Bodymovin JSON.

<lottie-player
  autoplay
  controls
  loop
  mode="normal"
  src="https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json"
  style="width: 320px"
>
</lottie-player>

You may set and load animations programatically as well.

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

const player = document.querySelector("lottie-player");
player.load("https://assets3.lottiefiles.com/packages/lf20_UJNc2t.json");

// or load via a Bodymovin JSON string/object
player.load(
  '{"v":"5.3.4","fr":30,"ip":0,"op":38,"w":315,"h":600,"nm":"new", ... }'
);

Add the element tgs-player and set the src property to a URL pointing to a valid TGS JSON.

<tgs-player autoplay loop mode="normal" src="https//domain/example.tgs">
</tgs-player>

Returns the instance of lottie player used in the component.

Type: Promise<any>

Load (and play) a given Bodymovin animation.

Type: void

Pause animation play.

Type: void

Start playing animation.

Type: void

Animation play direction.

Type: void

Sets the looping of the animation.

Type: void

Sets animation play speed.

Type: void

Stops animation play.

Type: void

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

Type: void

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

Type: string

Toggles animation looping.

Type: void

Toggle playing state.

Type: void

Resize animation stage and elements in response to changes in component.

Type: void

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

MIT License © LottieFiles.com