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
Hide and delete unwanted layers
Bring layers to front or back, delete the layers you dont need. Hide what you dont wanna show.
No complex tools needed to edit an animation.
No complex tools needed to edit an animation.
No complex tools needed to edit an animation.
Anyone can now personalize and ship a Lottie
Anyone can now personalize and ship a Lottie
M
M
M
M
of animations edited in the Lottie Editor
of animations edited in the Lottie Editor
of animations edited in the Lottie Editor
Trusted by million+ designers & developers from over companies
Trusted by million+ designers & developers from over companies
Trusted by million+ designers & developers from over companies
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.
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
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
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.
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
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.
FAQ
FAQ
What is Lottie Editor?
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
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
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
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
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.
Effortlessly bring motion to your everyday designs.