Properties

Property name	Type	Default	Description
`autoplay`	boolean	false	Auto-starts the animation on load.
`loop`	boolean	false	Determines if the animation should loop.
`src`	string	undefined	URL to the animation data (`.json` or `.lottie`).
`speed`	number	1	Animation playback speed. 1 is regular speed.
`data`	string \| ArrayBuffer	undefined	Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.
`mode`	string	”forward”	Animation play mode. Accepts “forward”, “reverse”, “bounce”, “reverse-bounce”.
`backgroundColor`	string	undefined	Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., “#000000”, “#000000FF”).
`segment`	[number, number]	[0, totalFrames - 1]	Animation segment. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.
`renderConfig`	RenderConfig	`{}`	Configuration for rendering the animation.
`useFrameInterpolation`	boolean	false	Determines if the animation should update on subframes. If set to false, the original AE frame rate will be maintained. If set to true, it will refresh at each requestAnimationFrame, including intermediate values. The default setting is true.
`marker`	string	undefined	Sets a specific marker to be played
`autoResizeCanvas`	boolean	true	Enable or disable auto resize of canvas
`playOnHover`	boolean	false	When enabled it plays animation only on hover
`animationId`	string	undefined	Plays specific animation within .lottie
`themeId`	string	undefined	Loads a specific theme within .lottie
`themeData`	string	undefined	Load theme data.
`layout`	Layout	undefined	Layout configuration for fitting the animation.
`stateMachineId`	string	undefined	The ID of the state machine to load.
`stateMachineConfig`	StateMachineConfig	undefined	Configuration for state machine behavior.
`loopCount`	number	0	Number of loops to play (0 for infinite).

RenderConfig

The renderConfig object accepts the following properties:

Property name	Type	Default	Description
`devicePixelRatio`	number	window.devicePixelRatio \| 1	The device pixel ratio.

Layout

The layout object accepts the following properties:

Property name	Type	Default	Description
`fit`	’contain’ \| ‘cover’ \| ‘fill’ \| ‘none’ \| ‘fit-width’ \| ‘fit-height'	'contain’	How to fit the animation in the canvas
`align`	[number, number]	[0.5, 0.5]	Alignment within canvas [x, y] from 0 to 1

StateMachineConfig

The stateMachineConfig object accepts the following properties:

Property name	Type	Description
`openUrlPolicy`	object	URL opening policy configuration
`openUrlPolicy.requireUserInteraction`	boolean	Require user interaction before opening URLs
`openUrlPolicy.whitelist`	string[]	Allowed URL patterns