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
Property name Description
Animation JSON File of the animation in JSON.
Loop When set to true, loops the animation. The property does not work when the property Play in succession is set to true and the property Loops number does not have a defined value.
Loops number The Loops number property defines the number of times to loop the animation. Setting the count property to 0 and setting the loop to true, loops the animation indefinitely. Property only works when property Loop is set to true.
Autoplay When set to true, automatically plays the visible animation on loading it.
Direction Direction of the animation. Set to Forward, to play the animation forward or set to Backward, to play it backward.
Mode Play mode. Setting the mode to Bounce plays the animation in an indefinite cycle, forward and then backward.
Speed Animation speed. Set this parameter to any positive number.
Intermission [ms] Duration (in milliseconds) to pause before playing each cycle in a looped animation. Set this parameter to 0 (no pause) or any positive number.
Background Background color. By default, the background is transparent and will take the color of the parent container. Supported formats:
  • HEX - for example: #D5F5E3
  • RGB - for example: RGB(255,0,0)
  • RGBA - for example: RGBA(255,0,0,0.3)
Alternative text This text will be read by the Text to Speech module after the user performs an action.
Preview alternative text This text will be read by the Text to Speech module in the preview.
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.