@aarsteinmedia/dotlottie-player 6.4.3 → 6.4.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +6 -0
- package/README.md +145 -129
- package/dist/unpkg-canvas.js +5 -5
- package/dist/unpkg-full.js +5 -5
- package/dist/unpkg-light.js +6 -6
- package/dist/unpkg-svg.js +4 -4
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing noteable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
|
|
9
9
|
|
|
10
|
+
## [6.4.4] - 10-08-2026
|
|
11
|
+
|
|
12
|
+
- Improved how masks are parsed in CanvasRenderer, and how window resize is handled.
|
|
13
|
+
|
|
14
|
+
### Changed
|
|
15
|
+
|
|
10
16
|
## [6.4.2] - 07-08-2026
|
|
11
17
|
|
|
12
18
|
### Changed
|
package/README.md
CHANGED
|
@@ -4,36 +4,43 @@
|
|
|
4
4
|
|
|
5
5
|
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.
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
### Choosing a build
|
|
8
|
+
|
|
9
|
+
| Import | When to use it |
|
|
10
|
+
| ------ | -------------- |
|
|
11
|
+
| `@aarsteinmedia/dotlottie-player` | Full player: all renderers, [expressions](https://helpx.adobe.com/after-effects/using/expression-basics.html), SVG effects, plus convert/combine on the fly. |
|
|
12
|
+
| `@aarsteinmedia/dotlottie-player/svg` | SVG renderer with expressions and SVG effects, but without convert/combine. Use this when you need those features but don’t want to load the full build. |
|
|
13
|
+
| `@aarsteinmedia/dotlottie-player/canvas` | Canvas renderer – usually easier on the hardware and visually similar to SVG for most animations. Most SVG-specific effects aren’t available, and animation support isn’t as broad as SVG. |
|
|
14
|
+
| `@aarsteinmedia/dotlottie-player/light` | Smallest build: SVG only, with expressions and SVG effects stripped out. No convert/combine. |
|
|
8
15
|
|
|
9
16
|
## Demo
|
|
10
17
|
|
|
11
|
-
Here is [a demo](https://www.aarstein.media/en/dotlottie-player), running on Next.js
|
|
18
|
+
Here is [a demo](https://www.aarstein.media/en/dotlottie-player), running on Next.js with TypeScript.
|
|
12
19
|
|
|
13
20
|
## Installation
|
|
14
21
|
|
|
15
22
|
### In HTML
|
|
16
23
|
|
|
17
24
|
- Import from CDN:
|
|
18
|
-
- Full
|
|
25
|
+
- Full:
|
|
19
26
|
```html
|
|
20
27
|
<script src="https://unpkg.com/@aarsteinmedia/dotlottie-player@latest/dist/unpkg-full.js"></script>
|
|
21
28
|
```
|
|
22
|
-
-
|
|
29
|
+
- SVG:
|
|
23
30
|
```html
|
|
24
|
-
<script src="https://unpkg.com/@aarsteinmedia/dotlottie-player@latest/dist/unpkg-
|
|
31
|
+
<script src="https://unpkg.com/@aarsteinmedia/dotlottie-player@latest/dist/unpkg-svg.js"></script>
|
|
25
32
|
```
|
|
26
|
-
|
|
27
|
-
- Import from `node_modules`:
|
|
28
|
-
- Full version:
|
|
33
|
+
- Canvas:
|
|
29
34
|
```html
|
|
30
|
-
<script src="
|
|
35
|
+
<script src="https://unpkg.com/@aarsteinmedia/dotlottie-player@latest/dist/unpkg-canvas.js"></script>
|
|
31
36
|
```
|
|
32
|
-
- Light
|
|
37
|
+
- Light:
|
|
33
38
|
```html
|
|
34
|
-
<script src="
|
|
39
|
+
<script src="https://unpkg.com/@aarsteinmedia/dotlottie-player@latest/dist/unpkg-light.js"></script>
|
|
35
40
|
```
|
|
36
41
|
|
|
42
|
+
- Import from `node_modules` the same way, e.g. `/node_modules/@aarsteinmedia/dotlottie-player/dist/unpkg-full.js`.
|
|
43
|
+
|
|
37
44
|
### In JavaScript or TypeScript
|
|
38
45
|
|
|
39
46
|
1. Install using npm, pnpm, or yarn:
|
|
@@ -42,15 +49,13 @@ Here is [a demo](https://www.aarstein.media/en/dotlottie-player), running on Nex
|
|
|
42
49
|
pnpm add @aarsteinmedia/dotlottie-player
|
|
43
50
|
```
|
|
44
51
|
|
|
45
|
-
2. Import in your app:
|
|
52
|
+
2. Import in your app (pick one build):
|
|
46
53
|
|
|
47
54
|
```js
|
|
48
55
|
import '@aarsteinmedia/dotlottie-player'
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
```js
|
|
56
|
+
// or:
|
|
57
|
+
import '@aarsteinmedia/dotlottie-player/svg'
|
|
58
|
+
import '@aarsteinmedia/dotlottie-player/canvas'
|
|
54
59
|
import '@aarsteinmedia/dotlottie-player/light'
|
|
55
60
|
```
|
|
56
61
|
|
|
@@ -60,7 +65,7 @@ If you're using TypeScript and want to import the component type, do it modularl
|
|
|
60
65
|
|
|
61
66
|
```ts
|
|
62
67
|
import '@aarsteinmedia/dotlottie-player' // Do this once globally.
|
|
63
|
-
import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player' // Do this per
|
|
68
|
+
import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player' // Do this per file that needs the type.
|
|
64
69
|
```
|
|
65
70
|
|
|
66
71
|
⚠️ Note that this pattern may provoke linter errors, such as `import/no-duplicates`.
|
|
@@ -81,44 +86,51 @@ Add the `dotlottie-player` element to your markup and point the `src` to a Lotti
|
|
|
81
86
|
>
|
|
82
87
|
</dotlottie-player>
|
|
83
88
|
```
|
|
89
|
+
|
|
84
90
|
### Load animation
|
|
91
|
+
|
|
85
92
|
To set animations programmatically, use the `load()` method.
|
|
86
93
|
|
|
87
94
|
```javascript
|
|
88
|
-
const
|
|
89
|
-
player?.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')
|
|
95
|
+
const player = document.querySelector('#find-me')
|
|
96
|
+
await player?.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')
|
|
90
97
|
```
|
|
91
98
|
|
|
92
99
|
### Convert to dotLottie
|
|
100
|
+
|
|
101
|
+
*(Full build only.)*
|
|
102
|
+
|
|
93
103
|
If you have a Lottie JSON animation and want to convert it to a dotLottie file – to leverage compression, combine multiple animations, and maintain a tidy file library – you can use the `convert()` method. This will trigger a browser download.
|
|
94
104
|
|
|
95
105
|
If `controls` are visible, there’s also a convert button in the context menu on the right-hand side.
|
|
96
106
|
|
|
97
107
|
### Convert to JSON
|
|
108
|
+
|
|
109
|
+
*(Full build only.)*
|
|
110
|
+
|
|
98
111
|
If you're debugging a dotLottie animation (e.g., expressions aren’t working as expected), you can convert it to JSON either using the `convert()` method or via the convert button if `controls` are enabled.
|
|
99
112
|
|
|
100
113
|
### Combine animations
|
|
114
|
+
|
|
115
|
+
*(Full build only.)*
|
|
116
|
+
|
|
101
117
|
To combine multiple animations into a single dotLottie file, use the `addAnimation()` method. This also triggers a browser download. Source files can be either dotLottie or JSON, and the output will always be dotLottie:
|
|
102
118
|
|
|
103
119
|
```javascript
|
|
104
|
-
const
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
])
|
|
110
|
-
}())
|
|
120
|
+
const player = document.querySelector('#find-me')
|
|
121
|
+
await player?.addAnimation([
|
|
122
|
+
{ id: 'animation_1', url: '/url/to/animation_1.lottie' },
|
|
123
|
+
{ id: 'animation_2', url: '/url/to/animation_2.json', direction: -1, speed: 2 }
|
|
124
|
+
])
|
|
111
125
|
```
|
|
112
126
|
|
|
113
127
|
You can also use this method without any `<dotlottie-player>` on the page. As long as the script is loaded, `dotLottiePlayer()` is available as a global method.
|
|
114
128
|
|
|
115
129
|
```js
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
])
|
|
121
|
-
}())
|
|
130
|
+
await dotLottiePlayer().addAnimation([
|
|
131
|
+
{ id: 'animation_1', url: '/path/to/animation_1.lottie' },
|
|
132
|
+
{ id: 'animation_2', url: '/path/to/animation_2.json', direction: -1, speed: 2 }
|
|
133
|
+
])
|
|
122
134
|
```
|
|
123
135
|
|
|
124
136
|
The new file will automatically load the first animation when initialized. You can toggle between animations using the `next()` and `prev()` methods, or the navigation buttons in the controls.
|
|
@@ -131,22 +143,20 @@ Here’s how to control playback settings for multiple animations:
|
|
|
131
143
|
id="find-me"
|
|
132
144
|
src="/path/to/combined-animations.lottie"
|
|
133
145
|
>
|
|
134
|
-
</dotlottie-player>
|
|
146
|
+
</dotlottie-player>
|
|
135
147
|
```
|
|
136
148
|
|
|
137
149
|
```js
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
]
|
|
149
|
-
)
|
|
150
|
+
const player = document.querySelector('#find-me')
|
|
151
|
+
player?.setMultiAnimationSettings([
|
|
152
|
+
{
|
|
153
|
+
autoplay: true
|
|
154
|
+
},
|
|
155
|
+
{
|
|
156
|
+
autoplay: true,
|
|
157
|
+
loop: true
|
|
158
|
+
}
|
|
159
|
+
])
|
|
150
160
|
```
|
|
151
161
|
|
|
152
162
|
### Angular
|
|
@@ -163,11 +173,11 @@ import '@aarsteinmedia/dotlottie-player'
|
|
|
163
173
|
styleUrls: ['./app.component.scss']
|
|
164
174
|
})
|
|
165
175
|
export class AppComponent {
|
|
166
|
-
title = 'your-app-name'
|
|
176
|
+
title = 'your-app-name'
|
|
167
177
|
}
|
|
168
178
|
```
|
|
169
179
|
|
|
170
|
-
2. Add the player to your
|
|
180
|
+
2. Add the player to your HTML template.
|
|
171
181
|
|
|
172
182
|
### React.js / Next.js
|
|
173
183
|
|
|
@@ -220,11 +230,10 @@ export default App
|
|
|
220
230
|
|
|
221
231
|
### Vue.js / Nuxt.js (using Vite.js)
|
|
222
232
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
1. Declare the dotlottie-player tag as a custom element, to prevent Vue from attempting to resolve it.
|
|
233
|
+
1. Declare the `dotlottie-player` tag as a custom element, so Vue doesn’t try to resolve it as a Vue component.
|
|
226
234
|
|
|
227
235
|
#### In Vue.js
|
|
236
|
+
|
|
228
237
|
`vite.config.ts`:
|
|
229
238
|
|
|
230
239
|
```ts
|
|
@@ -236,7 +245,7 @@ export default defineConfig({
|
|
|
236
245
|
vue({
|
|
237
246
|
template: {
|
|
238
247
|
compilerOptions: {
|
|
239
|
-
isCustomElement: (tag: string) =>
|
|
248
|
+
isCustomElement: (tag: string) => tag === 'dotlottie-player',
|
|
240
249
|
}
|
|
241
250
|
}
|
|
242
251
|
})
|
|
@@ -245,44 +254,44 @@ export default defineConfig({
|
|
|
245
254
|
```
|
|
246
255
|
|
|
247
256
|
#### In Nuxt.js
|
|
257
|
+
|
|
248
258
|
`nuxt.config.ts`:
|
|
249
259
|
|
|
250
260
|
```ts
|
|
251
261
|
export default defineNuxtConfig({
|
|
252
262
|
vue: {
|
|
253
263
|
compilerOptions: {
|
|
254
|
-
isCustomElement: (tag: string) =>
|
|
264
|
+
isCustomElement: (tag: string) => tag === 'dotlottie-player',
|
|
255
265
|
}
|
|
256
266
|
}
|
|
257
267
|
})
|
|
258
268
|
```
|
|
259
269
|
|
|
260
|
-
2. Import
|
|
270
|
+
2. Import the package once for its side effect (registers the custom element).
|
|
261
271
|
|
|
262
272
|
#### In Vue.js
|
|
273
|
+
|
|
263
274
|
`main.ts`:
|
|
264
275
|
|
|
265
276
|
```ts
|
|
266
277
|
import { createApp } from 'vue'
|
|
267
|
-
import
|
|
278
|
+
import '@aarsteinmedia/dotlottie-player'
|
|
268
279
|
import App from './App.vue'
|
|
269
280
|
|
|
270
|
-
|
|
271
|
-
app.component('DotLottiePlayer', DotLottiePlayer)
|
|
281
|
+
createApp(App).mount('#app')
|
|
272
282
|
```
|
|
273
283
|
|
|
274
284
|
#### In Nuxt.js
|
|
275
|
-
Create a `plugins` folder in your root if it doesn't exist already, add a file named `dotlottie-player.js`:
|
|
276
285
|
|
|
277
|
-
|
|
278
|
-
import DotLottiePlayer from '@aarsteinmedia/dotlottie-player'
|
|
286
|
+
Create a `plugins` folder in your root if it doesn't exist already, and add a client plugin named e.g. `dotlottie-player.client.ts`:
|
|
279
287
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
288
|
+
```ts
|
|
289
|
+
import '@aarsteinmedia/dotlottie-player'
|
|
290
|
+
|
|
291
|
+
export default defineNuxtPlugin(() => {})
|
|
283
292
|
```
|
|
284
293
|
|
|
285
|
-
3.
|
|
294
|
+
3. Use the element in your templates:
|
|
286
295
|
|
|
287
296
|
```vue
|
|
288
297
|
<template>
|
|
@@ -299,78 +308,85 @@ export default defineNuxtPlugin(({ vueApp }) => {
|
|
|
299
308
|
|
|
300
309
|
## Properties
|
|
301
310
|
|
|
302
|
-
| Property / Attribute | Description | Type
|
|
303
|
-
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
|
304
|
-
| `animateOnScroll` | Animate by scrolling.
|
|
305
|
-
| `autoplay` | Play animation on load.
|
|
306
|
-
| `background` | Background color.
|
|
307
|
-
| `controls` | Show controls.
|
|
308
|
-
| `count` | Number of times to loop animation.
|
|
309
|
-
| `delay` | Delay playback on playOnVisible, in
|
|
310
|
-
| `description` | Description for screen readers.
|
|
311
|
-
| `direction` | Direction of animation.
|
|
312
|
-
| `dontFreezeOnBlur` |
|
|
313
|
-
| `hover` | Whether to play on mouse hover.
|
|
314
|
-
| `intermission` | Pause between loop
|
|
315
|
-
| `loop` | Whether to loop animation.
|
|
316
|
-
| `mode` | Play mode.
|
|
317
|
-
| `mouseout` | Action on mouseout.
|
|
318
|
-
| `objectfit` | Resizing of animation in container.
|
|
319
|
-
| `once` | Whether, if playOnVisible is true, to play once or anytime animation is in view.
|
|
320
|
-
| `playOnClick` | Whether to toggle play on click.
|
|
321
|
-
| `playOnVisible` | Play when visible.
|
|
322
|
-
| `quiet` |
|
|
323
|
-
| `renderer` | Renderer to use.
|
|
324
|
-
| `selector` | Play on clicked element by id attribute.
|
|
325
|
-
| `
|
|
326
|
-
| `
|
|
327
|
-
| `
|
|
311
|
+
| Property / Attribute | Description | Type | Default |
|
|
312
|
+
| ------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | ----------------- |
|
|
313
|
+
| `animateOnScroll` | Animate by scrolling. | `boolean` | `false` |
|
|
314
|
+
| `autoplay` | Play animation on load. | `boolean` | `false` |
|
|
315
|
+
| `background` | Background color. | `string` | `transparent` |
|
|
316
|
+
| `controls` | Show controls. | `boolean` | `false` |
|
|
317
|
+
| `count` | Number of times to loop animation. | `number` | `0` |
|
|
318
|
+
| `delay` | Delay playback on playOnVisible, in milliseconds. | `number` | `0` |
|
|
319
|
+
| `description` | Description for screen readers. | `string` | `undefined` |
|
|
320
|
+
| `direction` | Direction of animation. | `1` \| `-1` | `1` |
|
|
321
|
+
| `dontFreezeOnBlur` | Disable freezing playback when the window loses focus (freeze-on-blur is the default). | `boolean` | `false` |
|
|
322
|
+
| `hover` | Whether to play on mouse hover. | `boolean` | `false` |
|
|
323
|
+
| `intermission` | Pause between loop iterations, in milliseconds. | `number` | `0` |
|
|
324
|
+
| `loop` | Whether to loop animation. | `boolean` | `false` |
|
|
325
|
+
| `mode` | Play mode. | `normal` \| `bounce` | `normal` |
|
|
326
|
+
| `mouseout` | Action on mouseout. | `void` \| `stop` \| `pause` \| `reverse` | `stop` |
|
|
327
|
+
| `objectfit` | Resizing of animation in container. | `contain` \| `cover` \| `fill` \| `none` \| `scale-down` | `contain` |
|
|
328
|
+
| `once` | Whether, if playOnVisible is true, to play once or anytime the animation is in view. | `boolean` | `false` |
|
|
329
|
+
| `playOnClick` | Whether to toggle play on click. | `boolean` | `false` |
|
|
330
|
+
| `playOnVisible` | Play when visible. | `boolean` | `false` |
|
|
331
|
+
| `quiet` | Suppress the graphic error screen on critical load errors. | `boolean` | `false` |
|
|
332
|
+
| `renderer` | Renderer to use (full build only; other builds lock this). | `svg` \| `canvas` \| `html` | `svg` |
|
|
333
|
+
| `selector` | Play on clicked element by id attribute. | `string` | `undefined` |
|
|
334
|
+
| `simple` | Hide advanced controls (loop, boomerang, convert, snapshot, settings). | `boolean` | `false` |
|
|
335
|
+
| `speed` | Animation speed. | `number` | `1` |
|
|
336
|
+
| `src` _(required)_ | URL to Lottie JSON or dotLottie. | `string` | `undefined` |
|
|
337
|
+
| `subframe` | When enabled this can help to reduce flicker on some animations, especially on Safari and iOS devices. | `boolean` | `false` |
|
|
328
338
|
|
|
329
339
|
## Methods
|
|
330
340
|
|
|
331
|
-
| Method | Function
|
|
332
|
-
| --------------------------------------------------------------- |
|
|
333
|
-
| `addAnimation(params: AddAnimationParams) => Promise<Result>` |
|
|
334
|
-
| `convert(params: ConvertParams) => Promise<Result>` |
|
|
335
|
-
| `destroy() => void` | Nullify animation and remove element from the DOM.
|
|
336
|
-
| `getLottie() => AnimationItem \| null` | Returns the lottie-web instance used in the component
|
|
337
|
-
| `
|
|
338
|
-
| `
|
|
339
|
-
| `
|
|
340
|
-
| `
|
|
341
|
-
| `
|
|
342
|
-
| `
|
|
343
|
-
| `
|
|
344
|
-
| `
|
|
345
|
-
| `
|
|
346
|
-
| `
|
|
347
|
-
| `
|
|
348
|
-
| `
|
|
349
|
-
| `
|
|
350
|
-
| `
|
|
351
|
-
| `
|
|
352
|
-
| `
|
|
353
|
-
| `
|
|
354
|
-
| `
|
|
355
|
-
| `
|
|
341
|
+
| Method | Function |
|
|
342
|
+
| --------------------------------------------------------------- | -------- |
|
|
343
|
+
| `addAnimation(params: AddAnimationParams) => Promise<Result>` | *(Full build only.)* Combine animations into a new dotLottie file and trigger a download. |
|
|
344
|
+
| `convert(params: ConvertParams) => Promise<Result>` | *(Full build only.)* Convert between JSON and dotLottie. Triggers a download in the browser. |
|
|
345
|
+
| `destroy() => void` | Nullify animation and remove element from the DOM. |
|
|
346
|
+
| `getLottie() => AnimationItem \| null` | Returns the lottie-web instance used in the component. |
|
|
347
|
+
| `getManifest() => LottieManifest \| undefined` | Returns the dotLottie manifest, if any. |
|
|
348
|
+
| `getMultiAnimationSettings() => AnimationSettings[]` | Returns multi-animation settings. |
|
|
349
|
+
| `getSegment() => [number, number] \| undefined` | Returns the current playback segment. |
|
|
350
|
+
| `load(src: string) => Promise<void>` | Load animation by URL or JSON string. |
|
|
351
|
+
| `next() => void` | Next animation (if several in file). |
|
|
352
|
+
| `pause() => void` | Pause. |
|
|
353
|
+
| `prev() => void` | Previous animation (if several in file). |
|
|
354
|
+
| `play() => void` | Play. |
|
|
355
|
+
| `reload() => Promise<void>` | Reload. |
|
|
356
|
+
| `seek(value: number \| string) => void` | Go to frame. Can be a number or a percentage string (e.g. `50%`). |
|
|
357
|
+
| `setCount(value: number) => void` | Dynamically set number of loops. |
|
|
358
|
+
| `setDirection(value: 1 \| -1) => void` | Set direction. |
|
|
359
|
+
| `setLoop(value: boolean) => void` | Set looping. |
|
|
360
|
+
| `setMultiAnimationSettings(value: AnimationSettings[]) => void` | Set multi-animation settings. |
|
|
361
|
+
| `setSegment(value: [number, number]) => void` | Play only part of an animation. E.g. from frame 10 to frame 60 would be `[10, 60]`. |
|
|
362
|
+
| `setSpeed(value?: number) => void` | Set speed. |
|
|
363
|
+
| `setSubframe(value: boolean) => void` | Set subframe. |
|
|
364
|
+
| `snapshot(download?: boolean, name?: string) => string \| null` | Snapshot the current frame as SVG. Downloads by default when `download` is true. |
|
|
365
|
+
| `stop() => void` | Stop. |
|
|
366
|
+
| `toggleBoomerang() => void` | Toggle between `bounce` and `normal`. |
|
|
367
|
+
| `toggleLoop() => void` | Toggle looping. |
|
|
368
|
+
| `togglePlay() => void` | Toggle play. |
|
|
356
369
|
|
|
357
370
|
## Events
|
|
358
371
|
|
|
359
372
|
The following events are exposed and can be listened to via `addEventListener` calls.
|
|
360
373
|
|
|
361
|
-
| Name
|
|
362
|
-
|
|
|
363
|
-
| `complete`
|
|
364
|
-
| `destroyed
|
|
365
|
-
| `error`
|
|
366
|
-
| `frame`
|
|
367
|
-
| `freeze`
|
|
368
|
-
| `load`
|
|
369
|
-
| `loop`
|
|
370
|
-
| `
|
|
371
|
-
| `
|
|
372
|
-
| `
|
|
373
|
-
| `
|
|
374
|
+
| Name | Description |
|
|
375
|
+
| ----------- | --------------------------------------------------------------- |
|
|
376
|
+
| `complete` | Animation is complete – including all loops |
|
|
377
|
+
| `destroyed` | Animation is destroyed |
|
|
378
|
+
| `error` | The source cannot be parsed, fails to load, or has format errors |
|
|
379
|
+
| `frame` | A new frame is entered |
|
|
380
|
+
| `freeze` | Animation is paused due to player being out of view |
|
|
381
|
+
| `load` | Animation is loaded |
|
|
382
|
+
| `loop` | A loop is completed |
|
|
383
|
+
| `next` | Switched to next animation in a multi-animation file |
|
|
384
|
+
| `_play` | Animation has started playing |
|
|
385
|
+
| `_pause` | Animation has paused |
|
|
386
|
+
| `previous` | Switched to previous animation in a multi-animation file |
|
|
387
|
+
| `ready` | Animation is loaded and player is ready |
|
|
388
|
+
| `rendered` | Player UI has been rendered |
|
|
389
|
+
| `stop` | Animation has stopped |
|
|
374
390
|
|
|
375
391
|
## WordPress Plugins
|
|
376
392
|
<img align="left" width="110" height="110" src="/.github/wpIcon.svg" style="margin-right:1em" />
|
|
@@ -383,4 +399,4 @@ We've also made a premium WordPress plugin for purchase: [AM LottiePlayer PRO](h
|
|
|
383
399
|
|
|
384
400
|
## License
|
|
385
401
|
|
|
386
|
-
GPL-2.0-or-later
|
|
402
|
+
GPL-2.0-or-later
|