Properties

Lists the Lottie-Svelte properties for playing animations.
Property
Description
Type
Default Value
autoplay
When set to true, automatically plays the animation on loading it.
boolean
false
background
Background color. By default, the background is transparent and will take the color of the parent container.
string
Not defined
controls
When set to true, displays player controls.
boolean
false
controlsLayout
Defines the controls to display. In the following example, all of the player controls are displayed. controlsLayout=
{[ "previousFrame", "playpause", "stop", "nextFrame", "progress", "frame", "loop", "spacer", "background", "snapshot", "zoom", "info" ]}
string
undefined
count
The number of times to loop the animation.
number
undefined
defaultFrame
The frame to display for the animation file when autoplay is disabled.
number
0
direction
Direction of the animation. Set to 1 to play the animation forward or set to -1 to play it backward.
number - Either 1 or -1
1
height
Height of the player in pixels.
number
undefined
hover
When set to true, plays animation on mouse over.
boolean
false
loop
When set to true, loops the animation. The count property defines the number of times to loop the animation. Setting the count property to 0 and setting loop to true, loops the animation indefinitely.
boolean
false
mode
Play mode. Setting the mode to PlayMode.Bounce plays the animation in an indefinite cycle, forwards and then backwards.
Either PlayMode.Bounce or PlayMode.Normal
PlayMode.Normal
onToggleZoom
Callback function called when zoom is toggled.
function
undefined
renderer
The renderer to use for the animation.
svg
canvas
speed
Animation speed. Set this parameter to any positive number.
number
1
src
The animation to play, either Bodymovin JSON data or a URL to a JSON file. This parameter is mandatory.
string
undefined
style
Container style.
object
undefined
width
Width of the player in pixels.
number
undefined
Last modified 6mo ago