LottieFiles just got even better with the new feature in Lottie Editor. The Lottie Editor simplifies the process of editing and fine-tuning Lottie animations, eliminating the need for coding or going back to the source files. In addition, users can easily make quick adjustments, alter colors, and optimize or conceal layers. The changes can then be easily applied to mobile apps using the Lottie mobile libraries, websites using the web player and Webflow to create dynamic interactions.

What’s new in Lottie Editor?

Powerful layer selection

The powerful layer selection capabilities in the Lottie Editor lets you find and select the layer so you can edit Lottie animations more easily. This makes the editing process more intuitive and user-friendly. The feature includes options like selecting layers directly on the canvas! This allows for more precise and efficient editing, giving you full control over the look and feel of your animation.

Powerful layer selection

Get creative with colors

The latest version of Lottie Editor allows you to quickly and easily change the appearance of your animation by changing the colors of any layer. Experiment with different hues to find the perfect color scheme for your animation.

Get creative with colors

Intuitively order layers or hide and delete unwanted layers

Lottie Editor simplifies the organization of your animation layers. Easily move layers to the front or back of the composition, delete unnecessary layers and hide unwanted elements. This gives you complete control over the final look of your animation, making it easy to create the perfect animation for your project.

Reorder layers or hide and delete unwanted layers

Edit text and swap images

The Lottie Editor allows for even greater customization of your animations by giving you the ability to edit text easily and replace image layers. This allows you to make further adjustments to your animation and make it perfectly suited to your specific needs and project.

Edit text and swap images

X-ray mode for advanced selection

The new Lottie Editor comes with various advanced features that make it easier to fine-tune your animations. For example, you can use the "X-ray mode" feature to inspect and select deeply nested layers. When the X-ray mode is enabled, it displays an outline of your animation, making it easier to understand which layers are nested inside others and quickly identify the layer you want to edit.

X-ray mode for advanced selection

Target layers with names and tags

Another powerful feature we have added to the Lottie Editor is the ability to add ID tags and classes to layers. This feature allows you to target specific layers using CSS and JavaScript, making it easier to create dynamic and interactive animations.

With ID tags, you could give a specific layer a unique identifier that can be targeted using CSS and JavaScript. This would allow you to style specific layers or add interactivity to specific elements of their animation.

On the other hand, classes enable users to group layers together and target them as a group. This feature can be particularly useful when working with animations with multiple elements that need to be styled or animated in the same way.

Target layers with names and tags

Adjust dimensions, frame rate and duration

With Lottie Editor, you can adjust dimensions, frame rate, and duration for your animations. Resize, speed up or slow down and make them the perfect fit for your project. When you're done save your animation as a Lottie JSON file, dotLottie, GIF, MP4, MOV, WebM and other popular formats.

Adjust dimensions, frame rate and duration

✨ Pro-Tip: Keyboard shortcuts

Yes, that's correct! The Lottie Editor now includes a variety of keyboard shortcuts to edit your Lottie animations more efficiently and streamlines the creation process. These shortcuts allow you to navigate through the animation and make precise edits quickly. Some of these shortcuts include undoing and redoing certain actions, deleting and hiding layers, moving layers to the front or back, zooming in and out and more.

Keyboard shortcuts

If you're a developer or designer who works with Lottie, we highly recommend checking out Lottie Editor. It's user-friendly, packed with powerful features and makes editing high-quality Lottie animations for web and mobile applications simple. With the Lottie Editor, the possibilities for animation design are endless.

And don't forget to share your creations with us on social media using #BuiltWithLottie or fill out the form and get a chance to be featured on our website. We can't wait to see what you come up with!