Properties

Property nameTypeDefaultDescription
autoplaybooleanfalseAuto-starts the animation on load.
loopbooleanfalseDetermines if the animation should loop.
srcstringundefinedURL to the animation data (.json or .lottie).
speednumber1Animation playback speed. 1 is regular speed.
datastring | ArrayBufferundefinedAnimation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations.
modestring”forward”Animation play mode. Accepts “forward”, “reverse”, “bounce”, “reverse-bounce”.
backgroundColorstringundefinedBackground color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., “#000000”, “#000000FF”).
segment[number, number]undefinedAnimation segment. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame.
renderConfigRenderConfigundefinedConfiguration for rendering the animation.
dotLottieRefCallback(dotLottie: DotLottie) => voidundefinedCallback function that receives a reference to the dotLottie web player instance once instantiated.
useFrameInterpolationbooleantrueDetermines 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.
autoResizeCanvasbooleantrueDetermines if the canvas should resize automatically to its container
animationIdstringundefinedThe ID of the animation to play.
themeIdstringundefinedThe ID of the theme to apply.
themeDatastringundefinedTheme data to apply as a string.
layoutLayoutundefinedLayout configuration for fitting the animation.
stateMachineIdstringundefinedThe ID of the state machine to load.
stateMachineConfigStateMachineConfigundefinedConfiguration for state machine behavior.
loopCountnumber0Number of loops to play (0 for infinite).
playOnHoverbooleanfalseWhen enabled it plays animation only on hover.

RenderConfig

The renderConfig object accepts the following properties:

Property nameTypeDefaultDescription
devicePixelRationumberwindow.devicePixelRatio | 1The device pixel ratio.

Layout

The layout object accepts the following properties:

Property nameTypeDefaultDescription
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 nameTypeDescription
openUrlPolicyobjectURL opening policy configuration
openUrlPolicy.requireUserInteractionbooleanRequire user interaction before opening URLs
openUrlPolicy.whiteliststring[]Allowed URL patterns