LottieFiles
Background
Background
Background
Background

Easily edit & customize Lottie animations

Our web-based editor allows you to edit, tweak and personalize your Lottie. Making changes on the go has never been this easy and fun.

Watch Video

Select. Edit. Save.

It’s now easier than ever to select animation layers, make edits and save different versions of your animation.

Powerful layer selection

Select animation layers on the canvas and reorder them as you wish with the improved layer panel.

Get creative with colors

Change layer colors and give your animation a colorful new look.

Click to change the color

Change animation layer colors

Hide and delete unwanted layers

Bring layers to front or back, delete the layers you dont need. Hide what you dont wanna show.

Trusted by million+ designers & developers from over companies

Intuitive layer reordering

Give animations a fresh twist by reordering layers easily and intuitively.

Edit text and swap images

Change the text and replace the image layers in your animations for an even deeper level of customization.

X-ray mode for advanced selection

Turn the X-ray mode on for an outline view that will help you inspect and select deeply nested layers.

Bounding box
Transparency grid
X-ray view
Background color

Click to try out these view modes

Bounding box
Transparency grid
X-ray view
Background color

Click to try out these view modes

Bounding box
Transparency grid
X-ray view
Background color

Click to try out these view modes

Target layers with names and tags

Select the layer you want to target, open up the attributes section and add an identifier (class(es) or id). The IDs tags and classes can be targeted using CSS or JavaScript when rendered on a webpage.

Customize animations like never before

Motion canvas & editor now available on your mobile app

Motion canvas & editor now available on your mobile app

Want an easier way to customize animations on the go? The LottieFiles mobile app offers a motion editor, templates, stickers & more.

Motion editor, templates and stickers on the LottieFiles mobile app
Motion editor, templates and stickers on the LottieFiles mobile app
Motion editor, templates and stickers on the LottieFiles mobile app

FAQ

FAQ

What is Lottie Editor?

Lottie Editor is an online animation editor that lets you customize and optimize Lottie JSON files without writing code. You can adjust colors, layers, images, and text, then deploy your animations across websites, mobile apps, and design tools using LottieFiles mobile libraries, the web player, or integrations like Webflow.


Common uses include:

  • Updating animation colors to match brand guidelines

  • Swapping placeholder images for product photos or icons

  • Changing seasonal or campaign text without recreating the animation

  • Optimizing file size for faster web and mobile performance

What is Lottie Editor?

Lottie Editor is an online animation editor that lets you customize and optimize Lottie JSON files without writing code. You can adjust colors, layers, images, and text, then deploy your animations across websites, mobile apps, and design tools using LottieFiles mobile libraries, the web player, or integrations like Webflow.


Common uses include:

  • Updating animation colors to match brand guidelines

  • Swapping placeholder images for product photos or icons

  • Changing seasonal or campaign text without recreating the animation

  • Optimizing file size for faster web and mobile performance

What is Lottie Editor?

Lottie Editor is an online animation editor that lets you customize and optimize Lottie JSON files without writing code. You can adjust colors, layers, images, and text, then deploy your animations across websites, mobile apps, and design tools using LottieFiles mobile libraries, the web player, or integrations like Webflow.


Common uses include:

  • Updating animation colors to match brand guidelines

  • Swapping placeholder images for product photos or icons

  • Changing seasonal or campaign text without recreating the animation

  • Optimizing file size for faster web and mobile performance

What is Lottie Editor?

Lottie Editor is an online animation editor that lets you customize and optimize Lottie JSON files without writing code. You can adjust colors, layers, images, and text, then deploy your animations across websites, mobile apps, and design tools using LottieFiles mobile libraries, the web player, or integrations like Webflow.


Common uses include:

  • Updating animation colors to match brand guidelines

  • Swapping placeholder images for product photos or icons

  • Changing seasonal or campaign text without recreating the animation

  • Optimizing file size for faster web and mobile performance

What’s new in Lottie Editor?

What’s new in Lottie Editor?

What’s new in Lottie Editor?

What’s new in Lottie Editor?

What's the difference between unique colors and all colors?

What's the difference between unique colors and all colors?

What's the difference between unique colors and all colors?

What's the difference between unique colors and all colors?

How do I add ID tags and classes to layers?

How do I add ID tags and classes to layers?

How do I add ID tags and classes to layers?

How do I add ID tags and classes to layers?

Why can’t I edit an animation’s text?

Why can’t I edit an animation’s text?

Why can’t I edit an animation’s text?

Why can’t I edit an animation’s text?

Can I use Lottie Editor for free?

Can I use Lottie Editor for free?

Can I use Lottie Editor for free?

Can I use Lottie Editor for free?

Do I need After Effects to use Lottie Editor?

Do I need After Effects to use Lottie Editor?

Do I need After Effects to use Lottie Editor?

Do I need After Effects to use Lottie Editor?

Can I optimize file size in Lottie Editor?

Can I optimize file size in Lottie Editor?

Can I optimize file size in Lottie Editor?

Can I optimize file size in Lottie Editor?

Can I edit animations from LottieFiles Marketplace in Lottie Editor?

Can I edit animations from LottieFiles Marketplace in Lottie Editor?

Can I edit animations from LottieFiles Marketplace in Lottie Editor?

Can I edit animations from LottieFiles Marketplace in Lottie Editor?

Does Lottie Editor support dotLottie files?

Does Lottie Editor support dotLottie files?

Does Lottie Editor support dotLottie files?

Does Lottie Editor support dotLottie files?

What’s the difference between Lottie Creator and Lottie Editor?

What’s the difference between Lottie Creator and Lottie Editor?

What’s the difference between Lottie Creator and Lottie Editor?

What’s the difference between Lottie Creator and Lottie Editor?

Motion design made easy

Motion design made easy

Create

Collaborate

Implement

Motion design made easy

Create

Create animation

Collaborate

Collaborate

Implement

Implement

Motion design made easy

Motion design made easy

Create

Collaborate

Implement

Design teams love LottieFiles

LottieFiles has extended my career by 10 years.

Anibal Koliren

Motion Lead at DisneyNow

LottieFiles has extended my career by 10 years.

Anibal Koliren

Motion Lead at DisneyNow

LottieFiles has extended my career by 10 years.

Anibal Koliren

Motion Lead at DisneyNow

LottieFiles has extended my career by 10 years.

Anibal Koliren

Motion Lead at DisneyNow

Lottie integrates swifty with my workflow, has a small footprint, I can share ideas with my teams rapidly.

Brian Lee

Senior animator at Headspace

Lottie integrates swifty with my workflow, has a small footprint, I can share ideas with my teams rapidly.

Brian Lee

Senior animator at Headspace

Lottie integrates swifty with my workflow, has a small footprint, I can share ideas with my teams rapidly.

Brian Lee

Senior animator at Headspace

Lottie integrates swifty with my workflow, has a small footprint, I can share ideas with my teams rapidly.

Brian Lee

Senior animator at Headspace

LottieFiles are super infused to all our products and services to get the personalized feeling just right.

Vinu Remesan

Head of Motion Design at Gojek

LottieFiles are super infused to all our products and services to get the personalized feeling just right.

Vinu Remesan

Head of Motion Design at Gojek

LottieFiles are super infused to all our products and services to get the personalized feeling just right.

Vinu Remesan

Head of Motion Design at Gojek

LottieFiles are super infused to all our products and services to get the personalized feeling just right.

Vinu Remesan

Head of Motion Design at Gojek

Create. Collaborate. Ship.

Effortlessly bring motion to your everyday designs.