Provide loadAnimation here from lottie-web.
DOM element in which the animation will be drawn.
Lottie icon data.
Optional options: LottieOptionsOptions for lottie-web. If not provided default will be used.
This property allows you to discover customizable colors or update them within a processed icon.
Example (list all supported colors by the icon):
{ ...iconElement.playerInstance.colors }
Example (update a single color):
iconElement.playerInstance.colors.primary = '#ff0000';
Example (update multiple colors at once):
iconElement.playerInstance.colors = { primary: 'red', secondary: 'blue' };
Example (reset all colors to default):
iconElement.playerInstance.colors = null;
This property allows you to discover customizable colors or update them within a processed icon.
Example (list all supported colors by the icon):
{ ...iconElement.playerInstance.colors }
Example (update a single color):
iconElement.playerInstance.colors.primary = '#ff0000';
Example (update multiple colors at once):
iconElement.playerInstance.colors = { primary: 'red', secondary: 'blue' };
Example (reset all colors to default):
iconElement.playerInstance.colors = null;
The 'direction' property lets you influence the direction of the animation playback, whether it plays forward (1) or in reverse (-1).
The 'direction' property lets you influence the direction of the animation playback, whether it plays forward (1) or in reverse (-1).
The 'duration' property provides the value of the animation length in seconds.
Access the player frame. You can manually control the animation playback by changing this frame.
Access the player frame. You can manually control the animation playback by changing this frame.
The 'frames' property provides the value of the animation length in terms of the number of frames.
The player is currently playing the animation.
The player is ready.
This property allows you to control whether the player should loop the animation.
This property allows you to control whether the player should loop the animation.
Access to internal lottie player instance.
Access to read or modify multiple properties at once. Resets to default any properties that are not provided.
Properties to assign.
Access to read or modify multiple properties at once. Resets to default any properties that are not provided.
Properties to assign.
Access all customizable properties.
This property allows you to control the speed of the icon animation.
This property allows you to control the speed of the icon animation.
This property allows you to control the state (motion type) of the icon. States enable switching between multiple animations built into a single icon file.
This property allows you to control the state (motion type) of the icon. States enable switching between multiple animations built into a single icon file.
Start listening for an event.
Event name.
Event callback.
Stop listening for an event.
Event name.
Optional callback: PlayerEventCallbackEvent callback.
The player implementation as a wrapper around
lottie-web.Main purposes:
lottie-webfrom our custom element. That way, the player can potentially work without a custom element.