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