LottieFiles

Why developers love and choose LottieFiles

Streamline your development workflow with secure, industry-leading tools.  Easily implement high-performance animations across web, mobile, and desktop.

Streamline your development workflow with secure, industry-leading tools.  Easily implement high-performance animations across web, mobile, and desktop.

Watch video

Streamline your design + development workflow with Lottie animations

Streamline your design + development workflow with Lottie animations

Streamline your design + development workflow with Lottie animations

Light and compact

Implement animations with just a few lines of code. Our JSON-based dotLottie format is 6x smaller than GIF and less than 4KB in memory allowing for lightweight animations that don't bloat your website or app.

Light and compact

Implement animations with just a few lines of code. Our JSON-based dotLottie format is 6x smaller than GIF and less than 4KB in memory allowing for lightweight animations that don't bloat your website or app.

Advanced compression

Push efficiency further with dotLottie. Compress your animations up to 80% more than standard Lottie files with our dotLottie converter.


Advanced compression

Push efficiency further with dotLottie. Compress your animations up to 80% more than standard Lottie files with our dotLottie converter.


Advanced compression

Push efficiency further with dotLottie. Compress your animations up to 80% more than standard Lottie files with our dotLottie converter.


Comprehensive testing tools

Test and preview your animations on any supported platform and device.

Comprehensive testing tools

Test and preview your animations on any supported platform and device.

Comprehensive testing tools

Test and preview your animations on any supported platform and device.

Advanced compression

Rest assured your animations will load quickly and smoothly with 60fps that are consistent across any platform and device.

Advanced compression

Rest assured your animations will load quickly and smoothly with 60fps that are consistent across any platform and device.

Advanced compression

Rest assured your animations will load quickly and smoothly with 60fps that are consistent across any platform and device.

Vector-based scalability

Leverage Lottie's vector-based architecture to eliminate pixelation. Scale your animations to any size without compromising quality, freeing you from resolution constraints.

Vector-based scalability

Leverage Lottie's vector-based architecture to eliminate pixelation. Scale your animations to any size without compromising quality, freeing you from resolution constraints.

Advanced compression

Ensure consistent animation rendering across multiple platforms including iOS, Android, web, React Native, and more.

Advanced compression

Ensure consistent animation rendering across multiple platforms including iOS, Android, web, React Native, and more.

Seamlessly integrates
into your existing tech stack

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
});

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

Javascript

Svelte

Svelte

React

React

iOS

Vue.js

VueJS

Android

Android

Basic HTML

Basic HTML

Introducing dotLottie:
Our most optimized animation format

A compact, versatile format that combines Lottie's power with enhanced compression, easier asset management, and improved performance on web and mobile applications.

A compact, versatile format that combines Lottie's power with enhanced compression, easier asset management, and improved performance on web and mobile applications.

Multi-animation support

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

Character.lottie

Walk

Jump

Idle

Multi-animation support

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

Character.lottie

Walk

Jump

Idle

Multi-animation support

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

Character.lottie

Walk

Jump

Idle

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

Incorporate state machines to create interactive animations responding to user actions and events.

Interactivity

Incorporate state machines to create interactive animations responding to user actions and events.

Climb to the top of SEO rankings

Climb to the top of SEO rankings

Optimize the performance of your website to stay ahead of the curve.

Optimize the performance of your website to stay ahead of the curve.

Maximize loading efficiency

With Lottie animations, you can significantly cut down page load times, improving user retention.

Maximize loading efficiency

With Lottie animations, you can significantly cut down page load times, improving user retention.

Keep them on your site longer

Engage users with smooth and captivating Lottie animations that keep them on your site longer and reduce bounce rates.

Keep them on your site longer

Engage users with smooth and captivating Lottie animations that keep them on your site longer and reduce bounce rates.

Improve interaction metrics

Enhance user experience with interactive animations that promote increased user activity and engagement on critical Ul and UX elements.

Improve interaction metrics

Enhance user experience with interactive animations that promote increased user activity and engagement on critical Ul and UX elements.

Boost conversion rates

Create a memorable and brandworthy experience with motion to increase backlinks and user shares while enhancing your site's online authority.

Boost conversion rates

Create a memorable and brandworthy experience with motion to increase backlinks and user shares while enhancing your site's online authority.

Say hello to the modern motion workflow

A simple, three-step workflow - create, collaborate and implement - that integrates seamlessly with your favorite design tools, ensuring you can animate anything and implement it anywhere.

A simple, three-step workflow - create, collaborate and implement - that integrates seamlessly with your favorite design tools, ensuring you can animate anything and implement it anywhere.

1. Create in your tool of choice

LottieFiles is integrated with your favorite design tools including Figma, AfterEffects, Canva, and dozens more enabling you to design and animate in your tool of choice.


If you're new to motion, we recommend starting with Lottie Creator which gives you access to an entire library of 500,000 free and premium ready-to-use animations.

Try Lottie Creator

Try Lottie Creator

2. Collaborate within your workspace

Upload and access your animations in the LottieFiles workspace. This is a secure and dedicated workspace where you can invite team members, build your motion library, make edits, share feedback, hand off links or assets, or take your animations back to your favorite design or dev tool.

Go to the LottieFiles workspace

Go to the LottieFiles workspace

3. Implement in a few simple steps

Lottie animations can be embedded on over 25,000 platforms and 50+ JavaScript libraries and frameworks. We offer open-source libraries, runtimes, and documentation that makes asset handoff easy, while our built-in CDN ensures your animations are always serving the latest version without manual updates.

View all our integrations

View all our integrations

Learn how other developers are using LottieFiles

Learn how other developers are using LottieFiles

Access documentation, supported features, SDKs, and sample projects in our Developer Portal.

Access documentation, supported features, SDKs, and sample projects in our Developer Portal.

Access documentation, supported features, SDKs, and sample projects in our Developer Portal.

FAQs

What is a dotLottie, and what is the difference between dotLottie and dotLottie Player?

dotLottie is an open-source file format designed as a superset of the Lottie file format. It can aggregate multiple .json files into one and is compressed with deflate compression, resulting in a smaller file size. 


The dotLottie Player is a cross-platform compatible Lottie player optimized for consistent rendering and supports additional features. It can render both .json and .lottie files.

What are some features of the dotLottie file format that are not available in Lottie JSON?
What libraries are available for working with dotLottie?
How do I optimize Lottie animations with scripting?
How does dotLottie improve performance?
How do I optimize dotLottie files for performance?
Can I use dotLottie files with React or Angular?
How do I set up the dotLottie player?
Can I integrate the dotLottie player with other libraries and frameworks?
How do I handle responsive design with Lottie animations?
What are the different accessibility guidelines followed in dotLottie player?

Additional resources

Introducing dotLottie: An Open-Source File Format

4 min read

Development Update Of The dotLottie Format

2 min read

Introducing and Getting Started with dotLottie Player for iOS

4 min read

Introducing ThorVG: A Powerful Graphics Library for Lottie Animation

4 min read