Getting Started

Introduction

dotLottie-wc is a web component that allows you to easily embed Lottie animations in your web applications. It is a wrapper around the dotLottie-web library.

Installation

Terminal window
npm install @lottiefiles/dotlottie-wc

Usage

Via npm

After installation, you can use dotlottie-wc in your HTML file:

<dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay="true" loop="true"></dotlottie-wc>

And import it in your JavaScript or TypeScript module:

import '@lottiefiles/dotlottie-wc';

Via CDN

You can also use the component directly via a npm CDN:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>@lottiefiles/dotlottie-wc | Basic Example</title>
</head>
<body>
    <dotlottie-wc src="https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie" autoplay loop></dotlottie-wc>
    <script type="module" src="https://unpkg.com/@lottiefiles/dotlottie-wc@latest/dist/dotlottie-wc.js"></script>
</body>
</html>

Properties

The dotlottie-wc exposes the following properties:

Property nameTypeDescription
dotLottieDotLottieThe dotLottie instance from DotLottie, allowing you to call methods and listen to events for more control over the animation.

Methods

You can call all DotLottie methods via the dotLottie property:

Playback Control

  • play() - Start/resume animation
  • pause() - Pause animation
  • stop() - Stop animation
  • setFrame(frame: number) - Jump to specific frame

Configuration

  • setSpeed(speed: number) - Set animation speed
  • setLoop(loop: boolean) - Set loop behavior
  • setMode(mode: Mode) - Set playback mode

Animation Management

  • loadAnimation(animationId: string) - Load specific animation
  • setMarker(marker: string) - Set marker to play from

Theme Management

  • setTheme(themeId: string) - Apply theme
  • setThemeData(themeData: string) - Apply theme from data

For complete methods documentation, see the web package API reference.

Events

You can listen to all DotLottie events via the dotLottie property:

Animation Events

  • load - Animation data loaded successfully
  • loadError - Animation loading failed ({ error: Error })
  • ready - WASM module loaded and ready
  • play - Animation started playing
  • pause - Animation paused
  • stop - Animation stopped
  • complete - Animation completed
  • loop - Animation looped ({ loopCount: number })
  • frame - Frame changed ({ currentFrame: number })

Example Usage

const dotLottieElement = document.querySelector('dotlottie-wc');


// Wait for the element to be ready
dotLottieElement.addEventListener('ready', () => {
  // Access the DotLottie instance
  const dotLottie = dotLottieElement.dotLottie;


  // Listen to events
  dotLottie.addEventListener('play', () => console.log('Playing'));
  dotLottie.addEventListener('complete', () => console.log('Complete'));


  // Control playback
  setTimeout(() => dotLottie.pause(), 2000);
});

For complete events documentation, see the web package events.

Attributes

Supported attributes for the dotLottie-wc

Properties

Supported properties for the dotLottie-wc