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!

Lottie Supported Features

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

Properties

Properties

Lottie-Android

Lottie-IOS

Lottie-Windows

Lottie-Web

dotLottie (ThorVG)

Expressions

Images

Text glyphs

Masks

Interpolation

Strokes

Fills

Motion design for every Industry & Use case imaginable

Website

Website

In-App Reactions

In-App Reactions

Animated Icons

Animated Icons

Gaming Assets

Gaming Assets

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

Additional resources

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

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?

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?

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?

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.

Is Lottie better than SVG?

Is Lottie better than SVG?

Is Lottie better than SVG?

Is Lottie better than SVG?

Is Lottie better than GIF?

Is Lottie better than GIF?

Is Lottie better than GIF?

Is Lottie better than GIF?

How do you use Lottie?

How do you use Lottie?

How do you use Lottie?

How do you use Lottie?

How do you make a Lottie?

How do you make a Lottie?

How do you make a Lottie?

How do you make a Lottie?

Why should I use Lottie?

Why should I use Lottie?

Why should I use Lottie?

Why should I use Lottie?

Who can use LottieFiles?

Who can use LottieFiles?

Who can use LottieFiles?

Who can use LottieFiles?

Where can I learn more about Lottie animations?

Where can I learn more about Lottie animations?

Where can I learn more about Lottie animations?

Where can I learn more about Lottie animations?

How do I edit Lottie animations?

How do I edit Lottie animations?

How do I edit 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.

LottieFiles is by Design Barn Inc.

Copyright © 2024 Design Barn Inc. All rights reserved.

help

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

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