dotLottie Web Player Layout & Styling

The dotLottie Web Player provides flexible options for controlling how animations are rendered and positioned within the canvas.

Layout Configuration

CodePen↗

Basic Layout

The layout object controls how the animation fits and aligns within the canvas:

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "animation.lottie",
  layout: {
    fit: "contain",
    align: [0.5, 0.5],
  },
});

Fit Modes

Available fit modes determine how the animation scales within the canvas:

Mode	Description
`contain`	Scale to fit while maintaining aspect ratio
`cover`	Scale to cover while maintaining aspect ratio
`fill`	Scale to fill canvas, may distort aspect ratio
`fit-width`	Scale to fit width, maintain aspect ratio
`fit-height`	Scale to fit height, maintain aspect ratio
`none`	No scaling applied

Example of changing fit mode:

// Update fit mode
dotLottie.setLayout({
  ...dotLottie.layout,
  fit: "cover",
});

Alignment

The align property takes an array of two numbers [x, y] representing the alignment point:

[0, 0] = top-left
[0.5, 0.5] = center (default)
[1, 1] = bottom-right

// Center horizontally, align to bottom
dotLottie.setLayout({
  ...dotLottie.layout,
  align: [0.5, 1],
});

Visual Styling

Background Color

Set the canvas background color:

// Using constructor
const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "animation.lottie",
  backgroundColor: "#000000",
});

// Or dynamically
dotLottie.setBackgroundColor("#000000");

The background color accepts:

6-digit hex color (e.g., "#FF0000")
8-digit hex color with alpha (e.g., "#FF0000FF")

Canvas Management

Resizing

Handle canvas resizing:

// Manual resize
dotLottie.resize();

// Automatic resize with render config
const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "animation.lottie",
  renderConfig: {
    autoResize: true,
  },
});

Device Pixel Ratio

Control rendering resolution:

const dotLottie = new DotLottie({
  canvas: document.querySelector("#canvas"),
  src: "animation.lottie",
  renderConfig: {
    devicePixelRatio: window.devicePixelRatio,
  },
});

Responsive Design

Example of responsive implementation:

<div style="width: 100%; max-width: 600px;">
  <canvas id="canvas" style="width: 100%; height: auto;"></canvas>
</div>

<script>
  const dotLottie = new DotLottie({
    canvas: document.querySelector("#canvas"),
    src: "animation.lottie",
    renderConfig: {
      autoResize: true,
    },
  });

  // Optional: Handle manual resize if needed
  window.addEventListener("resize", () => {
    dotLottie.resize();
  });
</script>

Best Practices

Canvas Sizing
- Set explicit dimensions on the canvas element
- Use CSS for responsive scaling
- Call resize() when canvas dimensions change
Performance
- Use appropriate fit mode for your use case
- Consider device pixel ratio for high-DPI displays
- Enable autoResize for responsive layouts
Layout Updates
- Preserve existing layout properties when updating
- Use setLayout() for atomic updates
- Consider animation state when changing layout

Web Player Layout and Styling