Easily edit & customize Lottie animations

Q: What’s new in Lottie Editor?

You can now edit Lottie animations from our ready-to-use library, IconScout and the private animations in your workspace. Once Lottie Editor loads your animation, you’ll be able to edit these properties, among others: -Layers– hide, unhide, delete or reorder layers; - Colors– change the colors of the elements in your animation, or change the background color; - Replace images and update text– replace the images in your Lottie, or update the text on text layers.

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

Editing unique colors simultaneously changes all instances of the color on the layer, while editing all colors changes each instance of the color on the layer.

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

In some animations, text editing is disabled because the font has been subsetted, resulting in limited glyphs. Learn more about font subsetting.

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.

Try Lottie Editor

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

Hide and delete unwanted layers

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

Try Lottie Editor

Trusted by million+ designers & developers from over companies

Intuitive layer reordering

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

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

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.

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.

Try Lottie Editor

Customize animations like never before

Intuitive layer reordering

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

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

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.

Click to try out these view modes

Target layers with names and tags

Try Lottie Editor

Customize animations like never before

Intuitive layer reordering

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

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

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.

Click to try out these view modes

Target layers with names and tags

Try Lottie Editor

Customize animations like never before

Intuitive layer reordering

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

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

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.

Click to try out these view modes

Target layers with names and tags

Try Lottie Editor

Customize animations like never before

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.

Download mobile app

Motion editor, templates and stickers on the LottieFiles mobile app

FAQ

What is Lottie Editor?

Lottie Editor makes it easy to edit Lottie animations without having to go through code or even back to the source files. Using Lottie Editor, you can quickly make minor edits, change colors as well as optimize and hide layers. Once you’ve made your changes you can implement your animations across your apps using Lottie mobile libraries, on the web using our web player and on Webflow to create powerful interactions.

What’s new in Lottie Editor?

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

How do I add ID tags and classes to layers?

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

Motion design made easy

Create

Collaborate

Implement

Motion design made easy

Create

Collaborate

Implement

The world’s top websites and apps use Lottie

Today’s most downloaded apps use Lottie to make products stand out, look aesthetically pleasing and engage users deeply.

View all showcases

“By leveraging Lottie animations, we can provide a whole experience.”

“Motion helps drive the message; it can tell a longer story with more emotion.”

“Lottie animations help us keep users engaged, delighted, and always learning.”

The world’s top websites and apps use Lottie

Today’s most downloaded apps use Lottie to make products stand out, look aesthetically pleasing and engage users deeply.

View all showcases

“By leveraging Lottie animations, we can provide a whole experience.”

“Motion helps drive the message; it can tell a longer story with more emotion.”

“Lottie animations help us keep users engaged, delighted, and always learning.”

The world’s top websites and apps use Lottie

Today’s most downloaded apps use Lottie to make products stand out, look aesthetically pleasing and engage users deeply.

View all showcases

“By leveraging Lottie animations, we can provide a whole experience.”

“Motion helps drive the message; it can tell a longer story with more emotion.”

“Lottie animations help us keep users engaged, delighted, and always learning.”

The world’s top websites and apps use Lottie

Today’s most downloaded apps use Lottie to make products stand out, look aesthetically pleasing and engage users deeply.

View all showcases

“By leveraging Lottie animations, we can provide a whole experience.”

“Motion helps drive the message; it can tell a longer story with more emotion.”

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

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

Create. Collaborate. Ship.

Effortlessly bring motion to your everyday designs.

Unlock All Features