Attributes
The dotlottie-wc component accepts all configuration attributes of DotLottie from @lottiefiles/dotlottie-web, allowing you to customize your animation as required.
| Attribute | Type | Description |
|---|---|---|
src | string | URL of the Lottie or DotLottie animation. |
autoplay | boolean | Automatically start the animation. |
loop | boolean | Loop the animation. |
speed | number | Playback speed. |
data | string | Animation data as a string or ArrayBuffer for .lottie animations. |
segment | Array | Animation segment as an array of two numbers (start frame and end frame). |
mode | string | Animation play mode (e.g., “forward”, “bounce”). |
backgroundColor | string | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., “#000000FF”). |
renderConfig | Object (RenderConfig) | Configuration for rendering the animation. |
useFrameInterpolation | boolean | Determines if the animation should update on subframes. |
marker | string | The Lottie named marker to play. |
animationId | string | The ID of the animation to play. |
themeId | string | The ID of the theme to apply. |
stateMachineId | string | The ID of the state machine to load. |
stateMachineConfig | Object (StateMachineConfig) | Configuration for state machine behavior. |
RenderConfig
The renderConfig object accepts the following properties:
| Property name | Type | Default | Description |
|---|---|---|---|
devicePixelRatio | number | window.devicePixelRatio | 1 | The device pixel ratio. |
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 |