Documentation
LottiePlayer
Description
LottiePlayer allows for easy embedding and playing of Lottie animations and the Lottie-based Telegram Sticker (TGS) animations in lessons.
Properties
The list starts with the common properties, learn more about them by visiting the Modules description section. The other available properties are described below.
Property name | Description | ||||||||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Items |
|
Controls | When set to true, displays player controls. | ||||||||||||||||||||||
Play in succession | When set to true, all animations are played one after another. Autoplay works automatically. Looping will not work without setting the value to the property Loops number. | ||||||||||||||||||||||||
Loop succession | When set to true, after playing the last animation it goes back to the first one. Works only when the Play in succession is set to true. | ||||||||||||||||||||||||
Send event on every frame | When set to true, animations send frame event on every frame. | ||||||||||||||||||||||||
Lang attribute | This property allows defining the language for this module (different than the language of the lesson). | Speech texts | List of speech texts: Play button, Pause button, Stop button, Loop button, Paused, Stopped. This text will be read by the Text to Speech module after the user performs an action. |
Supported commands
Command name | Params | Description |
---|---|---|
load | animationIndex, URL | Load the animation. The animation index should be from 1 to n, where n is the number of configured animation files. URL, or a JSON string or object representing a Bodymovin JSON animation to play. |
play | animationIndex | Play the animation. The animation index should be from 1 to n, where n is the number of configured animation files. If the animation index will not be provided, then the current animation starts playing. All other animations will be stopped. |
pause | animationIndex | Pause the animation. The animation index should be from 1 to n, where n is the number of configured animation files. If the animation index will not be provided, then the current animation will be paused. |
stop | animationIndex | Stop the animation. The animation index should be from 1 to n, where n is the number of configured animation files. If the animation index will not be provided, then the current animation will be stopped. |
freeze | animationIndex | Animation is paused due to the player being invisible. The animation index should be from 1 to n, where n is the number of configured animation files. If the animation index will not be provided, then the current animation will be frozen. |
playAll | --- | Current animation will be played. All other animations will be stopped. |
pauseAll | --- | All animations will be paused. |
stopAll | --- | All animations will be stopped. |
freezeAll | --- | All animations will be paused due to the player being invisible. |
loop | animationIndex, value | Enables or disables looping the animation. Animation index should be from 1 to n, where n is the number of configured animation Value is true or false - true enables looping, while false disables looping. |
frame | animationIndex, numberFrame | Seek animation to a given frame. Animation index should be from 1 to n, where n is the number of configured animation files. NumberFrame can either be a number or a percent string (for example, 40%). |
show | --- | Show the module. |
hide | --- | Hide the module. |
jumpTo | animationIndex | Jumps to animation with the specified index. The animation index should be from 1 to n, where n is the number of configured animation files. Providing an animation number out of this range will have no effect. |
next | --- | Jumps to the next animation. If the last animation is currently displayed, this command will have no effect. |
previous | --- | Jumps to the previous animation. If the first animation is currently displayed, this command will have no effect. |
Events
LottiePlayer module sends ValueChanged type events to Event Bus when the user selects it.
Field name | Description |
---|---|
Item | --- |
Value | 1 |
Score | --- |
The load event occurs when the animation loads.
Field name | Description |
---|---|
Item | Number of the animation from the list. Animation number should be from 1 to n. |
Value | load |
Score | --- |
The error event occurs when the animation source cannot be parsed, fails to load, or has format errors.
Field name | Description |
---|---|
Item | Number animation from the list. Animation number should be from 1 to n. |
Value | error |
Score | --- |
The ready event occurs when animation data is loaded, and the player is ready.
Field name | Description |
---|---|
Item | Number of the animation from the list. Animation number should be from 1 to n. |
Value | ready |
Score | --- |
The play event occurs when the animation starts playing.
Field name | Description |
---|---|
Item | Number of the animation from the list. Animation number should be from 1 to n. |
Value | play |
Score | --- |
The pause event occurs when the animation is paused.
Field name | Description |
---|---|
Item | Number of the animation from the list. Animation number should be from 1 to n. |
Value | pause |
Score | --- |
The stop event occurs when the animation is stopped.
Field name | Description |
---|---|
Item | Number of the animation from the list. Animation number should be from 1 to n. |
Value | stop |
Score | --- |
The freeze event occurs when animation is paused due to the player being invisible.
Field name | Description |
---|---|
Item | Number of the animation from the list. Animation number should be from 1 to n. |
Value | freeze |
Score | --- |
The loop event occurs when the animation loop is completed.
Field name | Description |
---|---|
Item | Number of the animation from the list. Animation number should be from 1 to n. |
Value | loop |
Score | --- |
The complete event occurs when the animation is complete (all loops completed).
Field name | Description |
---|---|
Item | Number of the animation from the list. Animation number should be from 1 to n. |
Value | complete |
Score | --- |
The frame event occurs when a new frame is entered.
Field name | Description |
---|---|
Item | Number of the animation from the list. Animation number should be from 1 to n. |
Value | frame |
Score | --- |
CSS classes
Class name | Description |
---|---|
.lottie-player-invalid-configuration | Module's invalid configuration. |
.lottie-player-visible-animation | Indicates the style that applies to currently displayed animation. |
.lottie-player-invisible-animation | Indicates the style that applies to not displayed animations. |
lottie-player::part(keyboard_navigation_active_element) | Indicates the style that applies to the control activated by the keyboard navigation. |