Lottie Player
Overview
A semi-visible component to display Lottie animations
Component Properties
| Property | Description |
|---|---|
| source | The url of the animation to play. |
| height | Height of the lottie player in pixels |
| width | Width of the lottie player in the pixels |
| speed | The rate of speed at which the animation should play. |
| loop | If enabled, the animation will continuously replay from the beginning after reaching the end. |
| auto play | If enabled, the animation will start playing as soon as the webpage is loaded. |
Blocks
Events
On Load
Triggers when animation data is loaded.
loading block...
On Ready
Triggers when animation data is loaded and player is ready.
loading block...
Error
Triggers when an animation source cannot be parsed, fails to load or has format errors.
loading block...
On Start Playing
Triggers when an Animation starts playing.
loading block...
On Paused
Triggers when Animation is paused.
loading block...
On Stopped
Triggers when Animation is stopped.
loading block...
On Freeze
Triggers when Animation is paused due to player being invisible.
loading block...
On Loop Complete
Triggers when An animation loop is completed.
loading block...
Complete
Triggers when Animation is complete (all loops completed).
loading block...
Frame
Triggers when A new frame is entered.
loading block...
Methods
Load
Load (and play) a given Bodymovin animation.
loading block...
| Input Params | Type | Description |
|---|---|---|
| source | String | The url of the animation to play. |
Pause
Pauses the animation.
loading block...
Play
Plays the animation.
loading block...
Stop
Stops animation playback.
loading block...
Resize
Resizes the animation to the dimensions of the device on which it is being played.
loading block...
Properties
speed
Accepts: Number
sets the speed of the animation
loading block...
loop
Accepts: Boolean
sets the loop for the lottie animation
loading block...
auto play
Accepts: Boolean
sets the auto play for the lottie component
loading block...
speed
Returns: Number
gets the speed of the animation
loading block...
loop
Returns: Boolean
gets the loop is enabled or not
loading block...
auto play
Returns: Boolean
gets the auto play is enabled or not
loading block...
hide
Accepts: Boolean
Hides the component if the input is true and shows it if the input is false
loading block...
hidden
Returns: Boolean
Returns true if the component is hidden and false if it is not
loading block...