Lottie
my.createLottieContext
Create a context for controlling Lottie animations.
Use this API to create a context object for controlling Lottie animation playback.
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
Create a context for controlling Lottie animations.
| Property | Type | Required | Description |
|---|---|---|---|
| lottieId | String | Yes | ID of the lottie component |
| Method | Description |
|---|---|
| play() | Start animation |
| pause() | Pause animation |
| stop() | Stop animation |
| setSpeed() | Set playback speed; a positive number is fast-forward speed, a negative number is rewind speed |
| goToAndStop() | Move the animation to the target progress (0.0-1.0) and stop it there |
| goToAndPlay() | Move the animation to the target progress (0.0-1.0) and play from that progress |
| playFromMinToMaxProgress() | Play the animation from the minimum to the maximum progress interval (0.0-1.0) |
| playFromMinToMaxFrame() | Play the animation from the minimum to the maximum frame interval |
| downgradeToPlaceholder() | Downgrade the animation to the default placeholder image |
const lottieContext = my.createLottieContext('myLottie');
lottieContext.play();
// Pause after 2 seconds
setTimeout(() => {
lottieContext.pause();
}, 2000);
<lottie id="myLottie" path="animation.json" autoplay="{{false}}" />