Config

The DotLottie constructor accepts a config object with the following properties:

Property name	Type	Required	Default	Description
`autoplay`	boolean		false	Auto-starts the animation on load.
`loop`	boolean		false	Determines if the animation should loop.
`canvas`	HTMLCanvasElement	✔️	undefined	Canvas element for animation rendering.
`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		true	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	The lottie named marker to play.
`layout`	Layout		undefined	The animation layout configuration.
`themeId`	string		undefined	The ID of the dotLottie theme to initially use.