Search animations⌘K

Design motion once. Ship it everywhere as one tiny file

LottieFiles is the platform for Lottie, the animation format that's 6x smaller than a GIF. Create it in Figma, After Effects, or your browser and manage it in a shared workspace with your team. Ship it to web, iOS, Android and more with a few lines of code.

Get started for free

View plans

Trusted by

million+ designers and

developers from over

280,000

companies worldwide

Trusted by

million+ designers and

developers from over

280,000

companies worldwide

Trusted by

million+ designers and

developers from over

280,000

companies worldwide

What’s a Lottie, and
a dotLottie?

It's how modern product teams put motion on screen with a tiny, open-source file that plays anywhere and weighs next to nothing.

GIF

128kb

Lottie JSON

31kb

60% smaller than GIF

dotLottie

8kb

98% smaller than GIF

Lottie JSON

A Lottie is an animation stored as vector data in a small JSON file, so it ships like a static asset, but it moves.

Tiny

6× smaller and 10× faster to ship than a GIF.

Infinitely scalable

It’s vectors, so it never pixelates at any size.

Plays everywhere

Web, iOS, Android, React Native, Flutter, all from one file.

Interactive

Elements are exposed, so it can react to clicks, hovers, and data.

dotLottie

dotLottie bundles one or more Lottie animations and its assets into one single file. It’s up to 10x smaller than Lottie JSON and built for production.

80% smaller than raw Lottie JSON

For faster loads and less memory.

Themes

Switch dark, light or brand with a runtime call.

State Machines

Add interactivity visually, and ship inside the same file.

Motion Tokens

Bind properties to real data, changeable at
runtime.

Lottie JSON

A Lottie is an animation stored as vector data in a small JSON file, so it ships like a static asset, but it moves.

Tiny

6× smaller and 10× faster to ship than a GIF.

Infinitely scalable

It’s vectors, so it never pixelates at any size.

Plays everywhere

Web, iOS, Android, React Native, Flutter, all from one file.

Interactive

Elements are exposed, so it can react to clicks, hovers, and data.

dotLottie

dotLottie bundles one or more Lottie animations and its assets into one single file. It’s up to 10x smaller than Lottie JSON and built for production.

80% smaller than raw Lottie JSON

For faster loads and less memory.

Themes

Switch dark, light or brand with a runtime call.

State Machines

Add interactivity visually, and ship inside the same file.

Motion Tokens

Bind properties to real data, changeable at
runtime.

Lottie JSON

A Lottie is an animation stored as vector data in a small JSON file, so it ships like a static asset, but it moves.

Tiny

6× smaller and 10× faster to ship than a GIF.

Infinitely scalable

It’s vectors, so it never pixelates at any size.

Plays everywhere

Web, iOS, Android, React Native, Flutter, all from one file.

Interactive

Elements are exposed, so it can react to clicks, hovers, and data.

dotLottie

dotLottie bundles one or more Lottie animations and its assets into one single file. It’s up to 10x smaller than Lottie JSON and built for production.

80% smaller than raw Lottie JSON

For faster loads and less memory.

Themes

Switch dark, light or brand with a runtime call.

State Machines

Add interactivity visually, and ship inside the same file.

Motion Tokens

Bind properties to real data, changeable at
runtime.

Lottie JSON

A Lottie is an animation stored as vector data in a small JSON file, so it ships like a static asset, but it moves.

Tiny

6× smaller and 10× faster to ship than a GIF.

Infinitely scalable

It’s vectors, so it never pixelates at any size.

Plays everywhere

Web, iOS, Android, React Native, Flutter, all from one file.

Interactive

Elements are exposed, so it can react to clicks, hovers, and data.

dotLottie

dotLottie bundles one or more Lottie animations and its assets into one single file. It’s up to 10x smaller than Lottie JSON and built for production.

80% smaller than raw Lottie JSON

For faster loads and less memory.

Themes

Switch dark, light or brand with a runtime call.

State Machines

Add interactivity visually, and ship inside the same file.

Motion Tokens

Bind properties to real data, changeable at
runtime.

Lottie achieved Official Internet Standard Status via IANA, 2025

How the platform
comes together

Stay in your existing tools with LottieFiles plugins, a browser-based Lottie Creator, and runtimes for every platform; connected from design to production.

Get started for free

Create your Lottie animation

Animate in Figma, After Effects, Lottie Creator, or generate it with AI. Either way, you get one file that’s ready to ship.

Optimize as a dotLottie

One file bundles the animation, themes, interactivity and assets, at ~80% smaller than Lottie JSON.

Manage it with your team

It lives in a shared workspace: versioned, commented, approved, on-brand, searchable.

Ship it web, iOS, Android and more

Served from the CDN; a few-line runtime embed plays it identically on web and native.

Control your animation at runtime

Swap themes, fire interactions and bind to live data at runtime, with no re-export.

Make motion in the tools you already use, or right in your browser

However your team works, it all exports as the same Lottie or dotLottie. No specialist bottleneck, no “can you re-render that.”

Lottie Creator

A web-based animation tool designed to create lightweight, interactive motion design using State Machines and AI-powered features.

Start creating

LottieFiles for Figma

Discover, animate and export professional Lottie animations without leaving Figma.

Start creating

LottieFiles for After Effects

Export animations as Lottie or dotLottie. Effortlessly test, preview and implement your Lottie animations across websites, apps and more.

Start creating

Lottie Creator

A web-based animation tool designed to create lightweight, interactive motion design using State Machines and AI-powered features.

Start creating

LottieFiles for Figma

Discover, animate and export professional Lottie animations without leaving Figma.

Start creating

LottieFiles for After Effects

Export animations as Lottie or dotLottie. Effortlessly test, preview and implement your Lottie animations across websites, apps and more.

Start creating

Go from a prompt to production-ready motion

Motion Copilot

Describe the motion you want and Motion Copilot will generate smooth keyframes for your animation.

Prompt to State Machines

Turn simple text prompts into complex state machines to make your animations interactive.

Prompt to Vector

Convert text prompts into high-quality AI-generated vector graphics that are ready to be animated.

Prompt to Themes

Use smart theming to create dark, light, and branded variations all within a single Lottie file.

Lottie Creator MCP

Connect any MCP-compatible AI and give it full access to build, edit and generate animations on your behalf.

Make motion a shared system your whole team can see

Motion shouldn't live on one person's desktop. The workspace gives your whole team a single source of truth that's searchable, optimized and always organized.

Explore teams

One source of truth

Every animation, version and source file in one searchable place.

Comments and approval statuses

Feedback and clear In review / Approved states on every file.

Roles and brand controls

Keep motion consistent and access correct as the team grows.

One library (DAM)

Lotties, SVGs, PSDs, and AEPs, with native dotLottie support no other DAM can match.

One source of truth

Every animation, version and source file in one searchable place.

Comments and approval statuses

Feedback and clear In review / Approved states on every file.

Roles and brand controls

Keep motion consistent and access correct as the team grows.

One library (DAM)

Lotties, SVGs, PSDs, and AEPs, with native dotLottie support no other DAM can match.

One source of truth

Every animation, version and source file in one searchable place.

Comments and approval statuses

Feedback and clear In review / Approved states on every file.

Roles and brand controls

Keep motion consistent and access correct as the team grows.

One library (DAM)

Lotties, SVGs, PSDs, and AEPs, with native dotLottie support no other DAM can match.

One source of truth

Every animation, version and source file in one searchable place.

Comments and approval statuses

Feedback and clear In review / Approved states on every file.

Roles and brand controls

Keep motion consistent and access correct as the team grows.

One library (DAM)

Lotties, SVGs, PSDs, and AEPs, with native dotLottie support no other DAM can match.

Visible to design and engineering

One library and a live status on every file, so designers, developers, marketers, and stakeholders all work from the same source. No more “can you re-send the latest?”

Optimized, production-ready by default

Files are compressed to optimized dotLottie automatically, up to ~80% smaller, so what your team shares and ships is already light and fast.

Scales without becoming chaos

Statuses, versions, roles, and brand controls keep a growing motion library organized, and make handoff to developers explicit instead of a guessing game.

Visible to design and engineering

One library and a live status on every file, so designers, developers, marketers, and stakeholders all work from the same source. No more “can you re-send the latest?”

Optimized, production-ready by default

Files are compressed to optimized dotLottie automatically, up to ~80% smaller, so what your team shares and ships is already light and fast.

Scales without becoming chaos

Statuses, versions, roles, and brand controls keep a growing motion library organized, and make handoff to developers explicit instead of a guessing game.

Visible to design and engineering

One library and a live status on every file, so designers, developers, marketers, and stakeholders all work from the same source. No more “can you re-send the latest?”

Optimized, production-ready by default

Files are compressed to optimized dotLottie automatically, up to ~80% smaller, so what your team shares and ships is already light and fast.

Scales without becoming chaos

Statuses, versions, roles, and brand controls keep a growing motion library organized, and make handoff to developers explicit instead of a guessing game.

Visible to design and engineering

One library and a live status on every file, so designers, developers, marketers, and stakeholders all work from the same source. No more “can you re-send the latest?”

Optimized, production-ready by default

Files are compressed to optimized dotLottie automatically, up to ~80% smaller, so what your team shares and ships is already light and fast.

Scales without becoming chaos

Statuses, versions, roles, and brand controls keep a growing motion library organized, and make handoff to developers explicit instead of a guessing game.

One runtime on every platform

Host the file on the LottieFiles CDN and drop in a runtime. The animation the designer approved is the exact one that ships, rendered identically by ThorVG on web and native.

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

Hosting built for motion.
Update what’s live without a redeploy

More than a file host: a dynamic CDN that lets you change what’s playing in production without touching your code or your CDN link.

Dynamic CDN

Host on the LottieFiles CDN behind one stable link. Push a new file revision and every embed updates instantly, with no redeploy and no cache-busting.

Tokenized animations

With Motion Tokens, change colors, text and transforms in production through the Slot API.  The source file is never modified and there’s  no re-render.

Versioned & cross-platform

Every revision and token is versioned inside the Lottie and served through one runtime API on web, iOS, and Android.

Measurable results  from real teams

Turn motion into a revenue layer

BankSalad’s Lottie-powered banners generate $70K in average monthly revenue.

Business case:

Motion that guides behavior at every touchpoint turns engagement into a measurable business outcome.

Turn motion into a revenue layer

BankSalad’s Lottie-powered banners generate $70K in average monthly revenue.

Business case:

Motion that guides behavior at every touchpoint turns engagement into a measurable business outcome.

Turn motion into a revenue layer

BankSalad’s Lottie-powered banners generate $70K in average monthly revenue.

Business case:

Motion that guides behavior at every touchpoint turns engagement into a measurable business outcome.

Turn motion into a revenue layer

BankSalad’s Lottie-powered banners generate $70K in average monthly revenue.

Business case:

Motion that guides behavior at every touchpoint turns engagement into a measurable business outcome.

Revenue

Build characters that scale without limits

Sparky runs on 60+ Lottie animations, each just 20–30KB, 10% the size of a GIF.

Business case:

Expressive character animation at enterprise scale needs to be lightweight enough to perform across millions of devices.

Build characters that scale without limits

Sparky runs on 60+ Lottie animations, each just 20–30KB, 10% the size of a GIF.

Business case:

Expressive character animation at enterprise scale needs to be lightweight enough to perform across millions of devices.

Build characters that scale without limits

Sparky runs on 60+ Lottie animations, each just 20–30KB, 10% the size of a GIF.

Business case:

Expressive character animation at enterprise scale needs to be lightweight enough to perform across millions of devices.

Build characters that scale without limits

Sparky runs on 60+ Lottie animations, each just 20–30KB, 10% the size of a GIF.

Business case:

Expressive character animation at enterprise scale needs to be lightweight enough to perform across millions of devices.

Brand Experience

Turn attention into  measurable action

ET Money’s home-screen CTR climbed from 2-3% to 8-9% (peaking at 11%), while production time fell 40%.

Business case:

Motion that drives action needs to ship fast and iterate faster. The workflow shouldn’t slow down what the product is proving.

Turn attention into  measurable action

ET Money’s home-screen CTR climbed from 2-3% to 8-9% (peaking at 11%), while production time fell 40%.

Business case:

Motion that drives action needs to ship fast and iterate faster. The workflow shouldn’t slow down what the product is proving.

Turn attention into  measurable action

ET Money’s home-screen CTR climbed from 2-3% to 8-9% (peaking at 11%), while production time fell 40%.

Business case:

Motion that drives action needs to ship fast and iterate faster. The workflow shouldn’t slow down what the product is proving.

Turn attention into  measurable action

ET Money’s home-screen CTR climbed from 2-3% to 8-9% (peaking at 11%), while production time fell 40%.

Business case:

Motion that drives action needs to ship fast and iterate faster. The workflow shouldn’t slow down what the product is proving.

Conversion

Make performance and creativity coexist

Switching to Lottie reduced animation file sizes by 80% without losing visual quality or creative range.

Business case:

A file that’s 80% smaller means faster load times on high-traffic pages without stripping out what makes the design work.

Make performance and creativity coexist

Switching to Lottie reduced animation file sizes by 80% without losing visual quality or creative range.

Business case:

A file that’s 80% smaller means faster load times on high-traffic pages without stripping out what makes the design work.

Make performance and creativity coexist

Switching to Lottie reduced animation file sizes by 80% without losing visual quality or creative range.

Business case:

A file that’s 80% smaller means faster load times on high-traffic pages without stripping out what makes the design work.

Make performance and creativity coexist

Switching to Lottie reduced animation file sizes by 80% without losing visual quality or creative range.

Business case:

A file that’s 80% smaller means faster load times on high-traffic pages without stripping out what makes the design work.

Engagement

Keep motion light enough for app scale

Switching to dotLottie cut Gojek’s animation file size by up to 89.35% versus JSON and improved memory stability by 99.6%.

Business case:

A file that’s 89% smaller isn’t just an engineering win. It’s motion that actually survives production at scale.

Keep motion light enough for app scale

Switching to dotLottie cut Gojek’s animation file size by up to 89.35% versus JSON and improved memory stability by 99.6%.

Business case:

A file that’s 89% smaller isn’t just an engineering win. It’s motion that actually survives production at scale.

Keep motion light enough for app scale

Switching to dotLottie cut Gojek’s animation file size by up to 89.35% versus JSON and improved memory stability by 99.6%.

Business case:

A file that’s 89% smaller isn’t just an engineering win. It’s motion that actually survives production at scale.

Keep motion light enough for app scale

Switching to dotLottie cut Gojek’s animation file size by up to 89.35% versus JSON and improved memory stability by 99.6%.

Business case:

A file that’s 89% smaller isn’t just an engineering win. It’s motion that actually survives production at scale.

Performance

Improve rendering performance without the overhead

Switching from rLottie to ThorVG cut render time by 80% and peak memory usage by 70%. This resulted in fewer errors and a pipeline built to scale.

Business case:

On-device rendering has hard limits. Canva needed a solution that could handle growing Lottie complexity without trading speed for quality.

Improve rendering performance without the overhead

Switching from rLottie to ThorVG cut render time by 80% and peak memory usage by 70%. This resulted in fewer errors and a pipeline built to scale.

Business case:

On-device rendering has hard limits. Canva needed a solution that could handle growing Lottie complexity without trading speed for quality.

Improve rendering performance without the overhead

Switching from rLottie to ThorVG cut render time by 80% and peak memory usage by 70%. This resulted in fewer errors and a pipeline built to scale.

Business case:

On-device rendering has hard limits. Canva needed a solution that could handle growing Lottie complexity without trading speed for quality.

Improve rendering performance without the overhead

Switching from rLottie to ThorVG cut render time by 80% and peak memory usage by 70%. This resulted in fewer errors and a pipeline built to scale.

Business case:

On-device rendering has hard limits. Canva needed a solution that could handle growing Lottie complexity without trading speed for quality.

Developer Experience

Read all case studies

Empowering designers, developers and teams to bring motion to everyday designs

Trusted by

million+ users and

280,000

companies worldwide

Trusted by

million+ users and

280,000

companies worldwide

Trusted by

million+ users and

280,000

companies worldwide

Individual

For solo designers & freelancers

$19.99

Per user / month, Billed annually.

Get Individual Plan

Features you'll love

Unlimited file uploads

Lottie Creator

Optimize Lottie file size

Optimized JSON & dotLottie formats can reduced your file sizes by upto 80%.

Lottie hosting & CDN

oEmbed animations

Embed your animations in popular webapp like Notion, Medium, Ghost, Reddit, WordPress and more!

Lottie Editor & Creator

Export to multiple file formats

600,000+ premium Lottie library

Access your account via Adobe After Effects, Figma, Webflow, Canva & more

Team

For teams working on commercial projects.

$24.99

Per user / month, Billed annually.

Get Team Plan

Everything in Individual, plus:

Unlimited team files

Track file version history

Team feedback & comments

Custom brand palette

Host AEP & Figma source files

Access team files via Figma

Unified admin & billing

Team roles & permissions

Access team library from Figma & Canva

Team+

For teams that needs a motion system

Tailored to seats & usage.

Get a Custom Quote

Everything in Team, plus:

5-25 Editors

10-50 Developers

Unlimited viewers

Motion System + Templates

50 GB DAM Storage

500 GB CDN

1,500 AI credits / month

Priority Support

Onboarding & Training

OPTIONAL ADD-ONS:

SSO (SAML + SCIM)

Invoice & Vendor Onboarding

Enterprise

For companies scaling motion across the enterprise

Volume & custom procurement

Book a Strategy Call

Everything in Team+, plus:

Editor & Developer seats scaled to your team

Minimum 25 Editors

Unlimited Viewers

Invite as many people as you like to search, view, and comment animations within your workspace or projects.

Vendor Onboarding, Compliance, Custom Terms & Reviews

Enterprise Governance

SSO, SAML, SCIM, Audit/Activity Logs, Domain Control

Dedicated CSM + Custom Onboarding

Priority Support with SLA

Custom CDN/AI/DAM

Custom CDN/AI/DAM Limits

See full feature comparison

For your security, all orders are processed via Stripe or PayPal. You can cancel your subscription anytime.

Explore 800,000
ready-to-use animations

Find what you need, customize it to your brand and drop it straight into your project.

Explore all animations

Frequently asked questions

What’s the difference between Lottie and dotLottie?

Lottie is the animation format itself. It's a JSON file that describes a vector animation: shapes, keyframes, easing, layers, all the data a renderer needs to draw the animation frame by frame.

dotLottie (the .lottie file) is a packaging format that wraps Lottie. It's a compressed ZIP container that can hold one or more Lottie animations plus any associated assets like images, fonts and a manifest describing what's inside. It also unlocks interactivity that a raw Lottie can't carry on its own, such as State Machines for interactive playback and transitions, Motion Tokens for binding animation properties to real-time data, and Theming so a single animation can adapt its look across contexts.

What’s the difference between Lottie and dotLottie?

Lottie is the animation format itself. It's a JSON file that describes a vector animation: shapes, keyframes, easing, layers, all the data a renderer needs to draw the animation frame by frame.

Do you have to leave your design tool to use LottieFiles?

No. LottieFiles has plugins so you can create and export with After Effects and Figma, or build in your browser with Lottie Creator. Our wide range of plugins and integrations also covers design tools like Canva, productivity tools like Notion and Google Workspace, and no-code builders like Webflow, Framer and more. Plus, we have runtimes for every major dev framework. See the full list on the integrations page.

Do you have to leave your design tool to use LottieFiles?

How does the LottieFiles workspace keep a growing motion library organized?

Every animation, version and source file lives in one searchable workspace. Files carry comments and clear ‘In review’ or ‘Approved’ states. Factors such as roles and brand controls keep motion consistent as the team grows. It's one digital asset management space for everything: motion files (Lottie JSON, dotLottie), images (PNG, GIF, SVG, JPEG, WebP) and design files (AI, PSD, AEP).

How does the LottieFiles workspace keep a growing motion library organized?

How do developers use the animations we approve?

Host the file on the LottieFiles CDN and drop it in a runtime in a few lines of code. The same runtime renders on web, iOS, Android, React, Vue, Svelte, and React Native, all from one file. The animation the designer approved is the exact one that ships, rendered identically by ThorVG everywhere.

How do developers use the animations we approve?

Can the same file be changed after shipping?

Yes. The LottieFiles CDN sits behind one stable link. Push a new revision and every embed updates instantly, with no redeploy and no cache busting. Your code and your CDN link never change.

Can the same file be changed after shipping?

Yes. The LottieFiles CDN sits behind one stable link. Push a new revision and every embed updates instantly, with no redeploy and no cache busting. Your code and your CDN link never change.

Design motion once. Ship it everywhere as one tiny file