feat: 🎸 backgroundColor (#53)

* feat: 🎸 backgroundColor * chore: 🤖 add changeset
LottieFiles · Nov 23, 2023 · 8e8bd1b · 8e8bd1b
1 parent 3904355
commit 8e8bd1b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 10 deletions.
diff --git a/.changeset/twenty-chairs-return.md b/.changeset/twenty-chairs-return.md
@@ -0,0 +1,5 @@
+---
+'@lottiefiles/dotlottie-web': minor
+---
+
+feat: 🎸 backgroundColor
diff --git a/apps/dotlottie-web-example/src/main.ts b/apps/dotlottie-web-example/src/main.ts
@@ -13,7 +13,7 @@ const app = document.getElementById('app') as HTMLDivElement;
 
 app.innerHTML = `
 <div class="grid">
-  <canvas data-src="https://lottie.host/1cf72a35-6d88-4d9a-9961-f1bb88087f2c/miJIHiyH4Q.lottie"></canvas>
+  <canvas data-bg-color="green" data-src="https://lottie.host/1cf72a35-6d88-4d9a-9961-f1bb88087f2c/miJIHiyH4Q.lottie"></canvas>
   <canvas data-src="https://lottie.host/647eb023-6040-4b60-a275-e2546994dd7f/zDCfp5lhLe.json"></canvas>
   <canvas data-src="https://lottie.host/a7421582-4733-49e5-9f77-e8d4cd792239/WZQjpo4uZR.lottie"></canvas>
   <canvas data-src="https://lottie.host/e2a24b6f-df7f-4fc5-94ea-30f0846f85dc/1RLOR2g0m3.lottie"></canvas>
@@ -62,13 +62,15 @@ const allCanvas = document.querySelectorAll('canvas[data-src]') as NodeListOf<HT
 
 allCanvas.forEach((canvas) => {
   const src = canvas.getAttribute('data-src') as string;
+  const backgroundColor = canvas.getAttribute('data-bg-color') as string;
 
   // eslint-disable-next-line no-new
   new DotLottie({
     canvas,
     src,
     loop: true,
     autoplay: true,
+    backgroundColor,
   });
 });
 
@@ -85,6 +87,7 @@ fetch('/hamster.lottie')
       loop: true,
       autoplay: true,
       mode: 'bounce',
+      backgroundColor: 'purple',
     });
 
     const playPauseButton = document.getElementById('playPause') as HTMLButtonElement;

diff --git a/packages/web/README.md b/packages/web/README.md
@@ -122,15 +122,16 @@ For this behavior to work correctly, the canvas element must be styled using CSS
 
 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                |          | "normal"  | Animation play mode. Accepts "normal", "reverse", "bounce", "bounce-reverse".                       |
+| 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                |          | "normal"  | Animation play mode. Accepts "normal", "reverse", "bounce", "bounce-reverse".                       |
+| `backgroundColor` | string                |          | undefined | Background color of the canvas. e.g., "#000000", "rgba(0, 0, 0, 0.5)" or "transparent".             |
 
 ### Properties
 

diff --git a/packages/web/src/dotlottie.ts b/packages/web/src/dotlottie.ts
@@ -20,6 +20,10 @@ export interface Config {
    * Boolean indicating if the animation should start playing automatically.
    */
   autoplay?: boolean;
+  /**
+   * Animation canvas background color.
+   */
+  backgroundColor?: string;
   /**
    * The canvas element to render the animation on.
    */
@@ -103,6 +107,10 @@ export class DotLottie {
     this._autoplay = config.autoplay ?? false;
     this._mode = config.mode ?? 'normal';
 
+    if (config.backgroundColor) {
+      this._canvas.style.backgroundColor = config.backgroundColor;
+    }
+
     if (!(this._canvas.hasAttribute('width') || this._canvas.hasAttribute('height'))) {
       this._shouldAutoResizeCanvas = true;
 
@@ -570,6 +578,11 @@ export class DotLottie {
     this._bounceCount = 0;
     this._direction = 1;
     this._mode = config.mode ?? 'normal';
+    this._canvas.style.backgroundColor = '';
+
+    if (config.backgroundColor) {
+      this._canvas.style.backgroundColor = config.backgroundColor;
+    }
 
     if (config.src) {
       this._loadAnimationFromURL(config.src);