Introducing the new dotLottie Runtimes
Introducing the new dotLottie Runtimes
Built for Performance and Cross-Platform Consistency
Built for Performance and Cross-Platform Consistency
Experience enhanced animations, faster load times, and reliable
cross-platform support with the new dotLottie Runtimes.
Experience enhanced animations, faster load times, and reliable
cross-platform support with the new dotLottie Runtimes.
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.
Say goodbye to the frustration of inconsistent animations across platforms. Our dotLottie Runtimes ensure feature parity across web, Android and iOS.
Enhanced performance
Experience lightning-fast, smooth animations with our optimized high-performance runtime, designed to boost efficiency across all devices.
Experience lightning-fast, smooth animations with our optimized high-performance runtime, designed to boost efficiency across all devices.
Platform consistency
Achieve uniform animation rendering on web, iOS, and Android, ensuring your animations perform consistently across all platforms.
Achieve uniform animation rendering on web, iOS, and Android, ensuring your animations perform consistently across all platforms.
AE expressions ready
NEW
Effortlessly integrate AE Expressions with support across web, iOS, and Android, now seamlessly incorporated into the dotLottie player.
Effortlessly integrate AE Expressions with support across web, iOS, and Android, now seamlessly incorporated into the dotLottie player.
Robust Framework Integrations
Robust Framework Integrations
With our runtimes, integrating with various popular frameworks is effortless.
With our runtimes, integrating with various popular frameworks is effortless.
Web
React
VueJS
Svelte
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
});Web
React
VueJS
Svelte
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
});Web
React
VueJS
Svelte
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
});
The dotLottie Advantage
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.
Introducing dotLottie, our innovative file format that brings a host of benefits: reduced file size, interactivity, expressions alongside theming and bundled packages.
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
Compress your animations by up to 80% and scale up or down without pixelation.
Reduced file size
Compress your animations by up to 80% and scale up or down without pixelation.
Reduced file size
Compress your animations by up to 80% and scale up or down without pixelation.
Reduced file size
Compress your animations by up to 80% and scale up or down without pixelation.
Theming
Adapt your animations effortlessly for dark mode, light mode, or user-custom modes.
Theming
Adapt your animations effortlessly for dark mode, light mode, or user-custom modes.
Theming
Adapt your animations effortlessly for dark mode, light mode, or user-custom modes.
Theming
Adapt your animations effortlessly for dark mode, light mode, or user-custom modes.
Interactivity
Leverage new interactivity methods to create engaging, interactive animations across platforms.
Interactivity
Leverage new interactivity methods to create engaging, interactive animations across platforms.
Interactivity
Leverage new interactivity methods to create engaging, interactive animations across platforms.
Interactivity
Leverage new interactivity methods to create engaging, interactive animations across platforms.
Bundled packages
Include multiple animations and assets in a single dotLottie file, simplifying management and deployment.
Bundled packages
Include multiple animations and assets in a single dotLottie file, simplifying management and deployment.
Bundled packages
Include multiple animations and assets in a single dotLottie file, simplifying management and deployment.
Bundled packages
Include multiple animations and assets in a single dotLottie file, simplifying management and deployment.
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.
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.
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.
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
Our runtimes outperform the current web player by a significant margin, as demonstrated in our detailed performance index.
Performance index
Our runtimes outperform the current web player by a significant margin, as demonstrated in our detailed performance index.
Performance index
Our runtimes outperform the current web player by a significant margin, as demonstrated in our detailed performance index.
Performance index
Our runtimes outperform the current web player by a significant margin, as demonstrated in our detailed performance index.
JS library
Create and control dotLottie animations effortlessly with our powerful JavaScript library.
JS library
Create and control dotLottie animations effortlessly with our powerful JavaScript library.
JS library
Create and control dotLottie animations effortlessly with our powerful JavaScript library.
JS library
Create and control dotLottie animations effortlessly with our powerful JavaScript library.
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%.
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%.
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.
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.
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.
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?
How do I get started with dotLottie Runtimes?
How do I get started with dotLottie Runtimes?
How do I get started with dotLottie Runtimes?
What are the benefits of using dotLottie Runtimes over existing ones?
What are the benefits of using dotLottie Runtimes over existing ones?
What are the benefits of using dotLottie Runtimes over existing ones?
What are the benefits of using dotLottie Runtimes over existing ones?
Are there any tutorials or documentation available?
Are there any tutorials or documentation available?
Are there any tutorials or documentation available?
Are there any tutorials or documentation available?
How does the dotLottie extension work compared to .json?
How does the dotLottie extension work compared to .json?
How does the dotLottie extension work compared to .json?
How does the dotLottie extension work compared to .json?
Additional resources
Lottie for developers
Lottie for developers
Discover Lottie ecosystem for integration and tools
to make implementation of Lottie easier
Discover Lottie ecosystem for integration and tools to make implementation of Lottie easier
