All things Lottie for Developers

Lottie Developer Portal is your single source for all things Lottie tooling and documentation. 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
});

Build the way you want in the framework you want!

Get started

Lottie supported features

Lottie does not support all features of Adobe After Effects; please refer to the list below for details.

Properties

Lottie-Android

Lottie-IOS

Lottie-Windows

Lottie-Web

dotLottie (ThorVG)

Expressions

Images

Text glyphs

Masks

Interpolation

Strokes

Fills

View the full table

Motion design for every industry & use case imaginable

Website

In-App Reactions

Animated Icons

Gaming Assets

Discover just some of the many ways that you can bring your designs to life with the magic of motion.

View use cases

Additional resources

Inspiration and best practices from our team for you to get started with the Lottie ecosystem

Introducing relottie: Lottie Processor Powered by Plugins

3 min read

Introducing relottie: Lottie Processor Powered by Plugins

3 min read

Introducing relottie: Lottie Processor Powered by Plugins

3 min read

Introducing relottie: Lottie Processor Powered by Plugins

3 min read

dotLottie - v2.4.0 State Machine Support

6 min read

dotLottie - v2.4.0 State Machine Support

6 min read

dotLottie - v2.4.0 State Machine Support

6 min read

dotLottie - v2.4.0 State Machine Support

6 min read

Introducing Our New dotLottie Web Player

3 min read

Introducing Our New dotLottie Web Player

3 min read

Introducing Our New dotLottie Web Player

3 min read

Introducing Our New dotLottie Web Player

3 min read

Introducing ThorVG: A Powerful Graphics Library for Lottie Animation

4 min read

Introducing ThorVG: A Powerful Graphics Library for Lottie Animation

4 min read

Introducing ThorVG: A Powerful Graphics Library for Lottie Animation

4 min read

Introducing ThorVG: A Powerful Graphics Library for Lottie Animation

4 min read

FAQs

What is a Lottie animation?

A Lottie is a JSON-based animation file format that lets you ship animations on any platform as easily as shipping static assets. They are small files that work on any device and can scale up or down without pixelation.

What is a Lottie animation?

Is Lottie better than SVG?

Is Lottie better than GIF?

How do you use Lottie?

How do you make a Lottie?

Why should I use Lottie?

Who can use LottieFiles?

Where can I learn more about Lottie animations?

How do I edit Lottie animations?

Lottie integrations and plugins

Discover our handpicked and expertly maintained suite of plugins and integrations. Designed for intuitive use, they allow you to smoothly create, edit, render, and design Lottie animations, fostering collaboration and easy implementation in your preferred design and development environments.

Explore Integrations

LottieFiles is by Design Barn Inc.

Need some help? Contact support

Lottie Supported Features

Lottie does not support all features of Adobe After Effects; please refer to the list below for details.

Properties

Lottie-Android

Lottie-IOS

Lottie-Windows

Lottie-Web

dotLottie (ThorVG)

Expressions

Images

Text glyphs

Masks

Interpolation

Strokes

Fills

View the full table

Lottie Supported Features

Lottie does not support all features of Adobe After Effects; please refer to the list below for details.

Properties

Lottie-Android

Lottie-IOS

Lottie-Windows

Lottie-Web

dotLottie (ThorVG)

Expressions

Images

Text glyphs

Masks

Interpolation

Strokes

Fills

View the full table