Slots (Dynamic Properties)
Learn how to use the slot system to dynamically modify animation properties at runtime, including colors, text, gradients, and more.
Slots (Dynamic Properties)
Slots allow you to dynamically override properties within a dotLottie animation at runtime — changing colors, text, numbers, gradients, and more without modifying the source file.
What are Slots?
A slot is a named, typed placeholder defined inside the animation that can be overridden at runtime. Designers can expose parts of an animation (e.g., a brand color, headline text, or icon fill) as slots, which developers can then update from their application code.
Supported slot types:
Color — RGBA color value
Scalar — Single number
Vector — 2D vector
[x, y]Gradient — Multi-stop color gradient
Text — Text content with optional styling
Image — Image replacement (set via
setSlots)
Discovering Available Slots
Use getSlotIds() to find all slots defined in the loaded animation:
import { DotLottie } from "@lottiefiles/dotlottie-web";
const dotLottie = new DotLottie({
canvas: document.querySelector("#canvas"),
src: "animation.lottie",
autoplay: true,
loop: true,
});
dotLottie.addEventListener("load", () => {
const slotIds = dotLottie.getSlotIds();
console.log("Available slots:", slotIds);
// e.g. ["primaryColor", "headlineText", "backgroundGradient"]
// Check a slot's type
const type = dotLottie.getSlotType("primaryColor");
console.log("primaryColor type:", type); // "color"
});Setting Slot Values
Color Slots
Color values are provided as [r, g, b, a] arrays with values in the 0–1 range:
// Static color
dotLottie.setColorSlot("primaryColor", [1, 0, 0, 1]); // Red
// Animated color (keyframes)
dotLottie.setColorSlot("primaryColor", [
{ t: 0, s: [1, 0, 0, 1] }, // Red at frame 0
{ t: 30, s: [0, 0, 1, 1] }, // Blue at frame 30
]);Scalar Slots
// Static value
dotLottie.setScalarSlot("opacity", 0.5);
// Animated value
dotLottie.setScalarSlot("opacity", [
{ t: 0, s: 0 },
{ t: 60, s: 1 },
]);Vector Slots
// Static vector [x, y]
dotLottie.setVectorSlot("offset", [10, 20]);
// Animated vector
dotLottie.setVectorSlot("offset", [
{ t: 0, s: [0, 0] },
{ t: 30, s: [100, 50] },
]);Gradient Slots
Gradients are represented as a flat number array in the format [offset, r, g, b, offset, r, g, b, ...], where each color stop is 4 numbers: an offset (0–1) followed by R, G, B values (0–1). Pass the number of color stops as the third argument:
// Two-stop gradient: red at 0%, blue at 100%
dotLottie.setGradientSlot(
"backgroundGradient",
[0, 1, 0, 0, // offset=0, R=1, G=0, B=0 (red)
1, 0, 0, 1], // offset=1, R=0, G=0, B=1 (blue)
2 // colorStopCount
);Text Slots
Text slots accept a TextDocument object:
dotLottie.setTextSlot("headlineText", {
t: "Hello, World!", // text content
s: 24, // font size
fc: [0, 0, 0, 1], // fill color [r, g, b, a]
f: "Arial", // font family
});Setting Multiple Slots at Once
Use setSlots to update several slots in a single call:
dotLottie.setSlots({
primaryColor: [1, 0, 0, 1],
headlineText: { t: "Updated!" },
opacity: 0.8,
});Reading Slot Values
// Get a single slot value
const value = dotLottie.getSlot("primaryColor");
// Get all slot values
const allSlots = dotLottie.getSlots();
console.log(allSlots);Resetting Slots
// Reset one slot to its default value
dotLottie.resetSlot("primaryColor");
// Reset all slots
dotLottie.resetSlots();
// Clear a slot value (removes override without restoring default)
dotLottie.clearSlot("primaryColor");
// Clear all slot values
dotLottie.clearSlots();Slot Type Reference
| Type | Value Type | Setter Method |
color | [r, g, b, a] or Keyframe<Color>[] | setColorSlot(id, value) |
scalar | number or Keyframe<number>[] | setScalarSlot(id, value) |
vector | [x, y] or Keyframe<Vector>[] | setVectorSlot(id, value) |
gradient | number[] (flat array) or Keyframe<number[]>[] | setGradientSlot(id, value, colorStopCount) |
text | TextDocument | setTextSlot(id, value) |
image | (set via setSlots) | setSlots({ id: imageData }) |
Keyframe Structure
Animated slot values use keyframes with the following structure (Lottie native format):
interface Keyframe<T> {
t: number; // frame number (time)
s: T; // start value at this keyframe
h?: 0 | 1; // hold keyframe (1 = no interpolation to next keyframe)
i?: BezierHandle; // incoming bezier easing handle
o?: BezierHandle; // outgoing bezier easing handle
}
interface BezierHandle {
x: number[];
y: number[];
}