We’re thrilled to announce our new open-source dotLottie web player @lottiefiles/dotlottie-web. This new player is based on the ThorVG 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, or visit our GitHub 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:For a quick setup without npm, include dotLottie Web directly in your HTML using a CDN:

<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:

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

Then, initialize the dotLottie player to load and animate:

<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:

Usage Scenarios

Let's explore more examples demonstrating various scenarios and uses of 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.
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).
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:
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.
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:
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:

For comprehensive details about the provided APIs and events, take a look at dotLottie Web on GitHub.

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:

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:

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 to stay on top of the latest developments.

Conclusion

The new dotLottie web player, 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, Vue, and Web components. Go check them out.

Don't forget to check out the dotLottie web player on GitHub today. Feel free to contribute to its development and remember to give us a star if you find it useful!