LottieFiles

Introducing the new dotLottie Runtimes

Built for performance and cross-platform consistency

Experience enhanced animations, faster load times, and reliable

cross-platform support with the new dotLottie Runtimes.

Web JS
React
Vue JS
Svelte
Flutter
iOS
Android

Visit Developer Portal

Seamless cross-platform experience

Say goodbye to the frustration of inconsistent animations across platforms. Our dotLottie Runtimes ensure feature parity across web, Android and iOS.

Enhance performance

Enhanced performance

Experience lightning-fast, smooth animations with our optimized high-performance runtime, designed to boost efficiency across all devices.

Canva Case Study

Performance Testing Page

Platform consistency

Platform consistency

Achieve uniform animation rendering on web, iOS, and Android, ensuring your animations perform consistently across all platforms.

Supported Features

AE expressions

AE expressions ready

NEW

Effortlessly integrate AE Expressions with support across web, iOS, and Android, now seamlessly incorporated into the dotLottie player.

Robust framework integrations

With our runtimes, integrating with various popular frameworks is effortless.

Web

React

VueJS

Svelte

React Native

Flutter

iOS

Android

import { DotLottie } from '@lottiefiles/dotlottie-web';

const dotLottie = new DotLottie({
    autoplay: true,
    loop: true,
    canvas: document.querySelector('#dotlottie-canvas'),
    src: "https://lottie.host/4db68bbd-31f6-4cd8-84eb-189de081159a/IGmMCqhzpt.lottie", // or .json file
});
Javascript
React
VueJS
Basic HTML
Svelte
Flutter
Apple iOS
Android

Visit Developer Portal

The dotLottie advantage

Introducing dotLottie, our innovative file format that brings a host of benefits:
reduced file size, interactivity, expressions alongside theming and bundled packages.

Reduced file size

Reduced file size

Compress your animations by up to 80% and scale up or down without pixelation.

Theming

Theming

Adapt your animations effortlessly for dark mode, light mode, or user-custom modes.

Interactivity

Interactivity

Leverage new interactivity methods to create engaging, interactive animations across platforms.

Bundled packages

Bundled packages

Include multiple animations and assets in a single dotLottie file, simplifying management and deployment.

Unmatched performance

Unmatched performance

The new dotLottie runtimes are powered by high-performance graphics engine ThorVG. With the support for the dotLottie format which is 80% smaller than a normal JSON.

Performance index

Performance index

Our runtimes outperform the current web player by a significant margin, as demonstrated in our detailed performance index.

JS library

JS library

Create and control dotLottie animations effortlessly with our powerful JavaScript library.

Canva logo

In our case, this led to saving approximately 8 seconds, marking an improvement of around 80%. Similarly, in memory terms, we saved approximately 164MB, which equates to ~70%.

Learn how Canva did it

FAQs

What platforms and frameworks are supported?

Our dotLottie Runtimes support web, Android, iOS, as well as popular frameworks such as React, Node.js, Vue.js, and more.

How do I get started with dotLottie Runtimes?
What are the benefits of using dotLottie Runtimes over existing ones?
Are there any tutorials or documentation available?
How does the dotLottie extension work compared to .json?

Additional resources

Introducing dotLottie: An open-source file format
Introducing dotLottie: An Open-Source File Format

4 min read

Development Update of the dotLottie Format
Development Update Of The dotLottie Format

2 min read

ThorVG Powerful Graphics Library for Lottie Animation
ThorVG: Powerful Graphics Library for Lottie Animation

4 min read

Getting Started with dotLottie Player for iOS
Getting Started with dotLottie Player for iOS

4 min read

Lottie for developers

Discover Lottie ecosystem for integration and tools
to make implementation of Lottie easier

Visit Developer Portal