This is a Web Component for easily embedding and playing Lottie animations in websites.
- Import from CDN.
<script src="https://unpkg.com/@lottiefiles/lottie-player@0.0.6/dist/lottie-player.js"></script>
- Import from local node_modules directory.
<script src="/node_modules/@lottiefiles/lottie-player/dist/lottie-player.js"></script>
- Install package using npm or yarn.
npm install --save @lottiefiles/lottie-player
- 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>
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 |
Bodymovin JSON data or URL to JSON. | string |
undefined |
Returns the instance of lottie player used in the component.
Type: Promise<any>
Pause animation play.
Type: void
Start playing animation.
Type: void
Animation play direction.
Name | Type | Description |
---|---|---|
value |
number |
Direction values. |
Type: void
Sets the looping of the animation.
Name | Type | Description |
---|---|---|
value |
boolean |
Whether to enable looping. Boolean true enables looping. |
Type: void
Sets animation play speed.
Name | Type | Description |
---|---|---|
value |
number |
Playback 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
Custom property | Description | Default |
---|---|---|
--lottie-player-toolbar-height | Toolbar height | 35px |
--lottie-player-toolbar-background-color | Toolbar background color | transparent |
--lottie-player-toolbar-icon-color | Toolbar icon color | #999 |
--lottie-player-toolbar-icon-hover-color | Toolbar icon hover color | #222 |
--lottie-player-toolbar-icon-active-color | Toolbar icon active color | #555 |
--lottie-player-seeker-track-color | Seeker track color | #CCC |
--lottie-player-seeker-thumb-color | Seeker thumb color | rgba(0, 107, 120, 0.8) |
MIT License © LottieFiles.com