# Introducing Our New dotLottie Web Player

*By Abdelrahman Ashraf · December 7, 2023*

Be part of the future of dotLottie web player.

---

We’re thrilled to announce our new open-source [dotLottie web player](https://github.com/LottieFiles/dotlottie-web) @lottiefiles/dotlottie-web. This new player is based on the [ThorVG](https://thorvg.org) rendering engine.

In this blog post, we will explore the significant benefits this player brings to users and share our commitment to developing it in a community-first approach.

## A New Renderer - ThorVG

ThorVG will serve as the new powerful rendering engine for your dotLottie (.lottie) animations. ThorVG is a cross-platform high-performance vector graphics library that now supports Lottie animations.

The cross-platform nature of ThorVG ensures consistent animation quality across all viewing platforms, guaranteeing that animations look the same no matter where they are viewed. Whether you view them on mobile or within your favorite frameworks, the animations will maintain consistency in appearance. With the release of new players across different platforms, your animations will perform across the board seamlessly, without compromising quality or differing visual aspects.  
  
Learn more about ThorVG in our detailed [blog post](https://lottiefiles.com/blog/working-with-lottie-animations/introducing-thorvg-powerful-graphic-library-for-lottie-animations), or visit our [GitHub](https://github.com/thorvg/thorvg/) page for an in-depth exploration.

## Getting Started with dotLottie Web

dotLottie-web is designed to offer a seamless developer experience. Here's a quick guide to integrating it into your web projects:

### Installation

**Using a CDN:Fo**r a quick setup without npm, include dotLottie Web directly in your HTML using a CDN:

```html
<script type="module">
	import { DotLottie } from "https://esm.sh/@lottiefiles/dotlottie-web";
</script>
```

### Basic Usage

Embed a canvas element in your HTML for the dotLottie player to draw the animation:

```html
<canvas id="dotLottie-canvas"></canvas>
```

Then, initialize the dotLottie player to load and animate:

```html
<script type="module">
	import { DotLottie } from "https://esm.sh/@lottiefiles/dotlottie-web";

	const canvas = document.querySelector("#dotLottie-canvas");
	const src = "https://lottie.host/5f22bb62-ad59-43c4-a320-57246ce3278f/lcxMV9CYuN.lottie";

	const dotLottie = new DotLottie({
	  canvas,
	  src,
	  loop: true,
	  autoplay: true
	});
</script>
```

Explore the full implementation on Codepen:

See the Pen <a href="https://codepen.io/lottiefiles/pen/JjzJZmL"> Getting Started (dotLottie Web)</a> by LottieFiles (<a href="https://codepen.io/lottiefiles">@lottiefiles</a>) on <a href="https://codepen.io">CodePen</a>.

## **Usage Scenarios**

Let's explore more examples demonstrating various scenarios and uses of [dotLottie Web](https://github.com/LottieFiles/dotlottie-web).

### **Controlling Animation Playback**

The dotLottie Web player's API provides extensive control over animations, enabling:

-   **Basic Controls**: Play, pause, and stop animations. The following code snippet demonstrates how to bind the dotLottie play, pause, and stop methods to buttons, allowing for intuitive control of our animation.

```jsx
const playBtn = document.querySelector("#play-btn");
const pauseBtn = document.querySelector("#pause-btn");
const stopBtn = document.querySelector("#stop-btn");

playBtn.addEventListener("click", () => dotLottie.play());
pauseBtn.addEventListener("click", () => dotLottie.pause());
stopBtn.addEventListener("click", () => dotLottie.stop());
```

-   **Seeking**: Navigate to specific animation frames using the `setFrame` method on the dotLottie instance. This method renders the animation at the specified frame regardless of its current state (playing, paused, or stopped).

```jsx
const someFrameNumber = 12;

dotLottie.setFrame(someFrameNumber);
```

-   **Speed Control**: Adjust the playback speed. This is achieved through the `setSpeed` method, which takes a speed multiplier as a numeric value, as illustrated below:

```jsx
const slowSpeed = 0.5; // Half the normal speed
dotLottie.setSpeed(slowSpeed);
```

-   **Loop Toggle**: Enable or disable animation looping. This feature is managed by the `setLoop` method, which alters the player's looping behavior.

```jsx
dotLottie.setLoop(false); // Disable looping
```

-   **Event Listening**: Respond to events such as 'play', 'pause', ‘stop’, and 'frame'. You can listen to these events using the `addEventListener` method, as shown in this example:

```jsx
dotLottie.addEventListener("play", () => {
	console.log("Animation has started playing.");
});
dotLottie.addEventListener("pause", () => {
	console.log("Animation has paused.");
});
dotLottie.addEventListener("stop", () => {
	console.log("Animation has stopped.");
});
dotLottie.addEventListener("frame", ({currentFrame}) => {
	console.log(`About to render frame ${currentFrame}, take action here!`);
});
```

Discover how to manipulate animation playback using dotLottie Web's API. Learn to implement basic controls like play, pause, and stop, navigate to specific frames, adjust playback speed, toggle looping, and respond to animation events. See these features in action in the following Codepen example:

See the Pen <a href="https://codepen.io/lottiefiles/pen/dyrRKwg"> Playback Controls (dotLottie Web)</a> by LottieFiles (<a href="https://codepen.io/lottiefiles">@lottiefiles</a>) on <a href="https://codepen.io">CodePen</a>.

For comprehensive details about the provided APIs and events, take a look at dotLottie Web on [GitHub](https://github.com/lottiefiles/dotlottie-web).

### **Dynamically Loading Animations**

The dotLottie Web player's **`load`** method enables dynamic animation loading, ideal for switching animations based on user actions or runtime conditions. It uses the same configuration object as in the initial setup (see "Getting Started").

Example of the **`load`** method usage:

```jsx
const dotLottie = new DotLottie({ canvas });
const loadBtn = document.querySelector("#my-load-btn");

loadBtn.addEventListener("click", () => {
    dotLottie.load({
        src: "https://URL_to_new_animation.lottie",
        autoplay: true,
        loop: true
    });
});
```

For a practical demonstration, see the following Codepen example showcasing on-demand lottie and dotLottie animation loading:

See the Pen <a href="https://codepen.io/lottiefiles/pen/JjzJZgB"> Dynamic Loading (dotLottie Web)</a> by LottieFiles (<a href="https://codepen.io/lottiefiles">@lottiefiles</a>) on <a href="https://codepen.io">CodePen</a>.

## Future Plans

Our commitment to continuously refining and enhancing the dotLottie players is steadfast. We aim to introduce more advanced features, such as theming and state machines, in future updates. Follow our [GitHub repository](https://github.com/lottiefiles/dotlottie-web) to stay on top of the latest developments.

### Conclusion

The new [dotLottie web player](https://github.com/LottieFiles/dotlottie-web), powered by ThorVG,  ensures high-quality and consistent rendering across various platforms.

The dotLottie web player seamlessly integrates with multiple JavaScript frameworks, and we offer wrappers for [React](https://www.npmjs.com/package/@lottiefiles/dotlottie-react), [Vue](https://www.npmjs.com/package/@lottiefiles/dotlottie-vue), and [Web components](https://www.npmjs.com/package/@lottiefiles/dotlottie-wc). Go check them out.

Don't forget to check out the dotLottie web player on [GitHub](https://github.com/lottiefiles/dotlottie-web) today. Feel free to contribute to its development and remember to give us a star if you find it useful!

---

## Related Articles

- [Lottie/dotLottie vs. GIF: Choosing the Right Animation for You](/blog/working-with-lottie-animations/lottie-vs-gif)
- [Introducing Motion Copilot 2.0 in Lottie Creator](/blog/working-with-lottie-animations/introducing-motion-copilot-on-lottie-creator)
- [Lottie Creator 2.0: A Powerful Web-Based Lottie Animation Tool](/blog/working-with-lottie-animations/lottie-creator-a-powerful-web-based-lottie-animation-tool)
- [Introducing Motion System: One Workflow for Animation That Actually Ships](/blog/working-with-lottie-animations/introducing-motion-system-one-workflow-for-animation-that-actually-ships)