Get a quote

The Wonders of the Lottie Editor

Published on December 13, 2023

The Lottie Editor is the life-saver of every animator out there. It takes away the hassle of coding and makes it possible to tweak the Lottie animations without even turning to the source files. Because having to go through the code or back to the source files are not only tedious from the start but adds extra hassle to the animator when further changes are requested.

When you use the editor, making minimal edits, altering colors, optimizing and hiding layers become much swifter when compared to the usual, hasslesome method. Let’s explore these points in detail:

Benefits of the Lottie Editor

Altering the Color

As it happens, a single layer can consist of various colors and gradient layers based on the design composition. Lottie Editor allows you to pick any layer from your animation and alter its color without any struggle. In just a few clicks, your animation will have a brand new color appearance. Now, isn’t that amazing?

Hiding & Unhiding the Layers

Sometimes, when using public animations, you may want to discard the extra layer acting as the background color and put a transparent background instead since that’s most preferable.

But hold on there – that doesn’t sound so easy, does it?

Without the Lottie Editor, no, it does not.

This entire process would have put sweat on the animator’s forehead.

But thanks to its existence, animations can be further simplified by hiding or unhiding layers according to your desire.

Editing the Text Layer

Have you noticed that we don’t see much application of editable text on Lottie?

Well, it’s because even though Lottie supports text rendering, it’s both time-intensive and complicated for an animator to undergo the code in order to update text in animations.

Thanks to the Lottie Editor, it’s now easy to choose a text layer and make alterations to its copy. But make sure, your animations are exported with text data and not with glyphs. Otherwise, it would not work. So, when you export your animation, uncheck the glyphs option of the setting of the composition you wish to export.

Implementing Telegram Stickers

We were so stoked to see Telegram releasing their animated stickers powered by Lottie, that we created a tool to test their stickers online. We even open-sourced our TGSKit to play Telegram stickers on the web.

Telegram’s animated stickers can now be found on Lottie Editor.

Isn’t that wonderful?

Even though Telegram has its own set of protocols for its stickers, Lottie Editor ensures that it abides by the rules to make things smoother.

Basically, Lottie Editor allows you to make changes to the size, particularly at 512 x 512, regulate the frame rate to 30 or 60 FPS, and even lets you alter the duration to 3 seconds. These numbers are specified so that the animation is validated as a Telegram animated sticker.

And boom, you’re all set!

Once you’re done with the changes, you can easily incorporate your animations across all your mobile apps by using the Lottie mobile libraries, web-player if you’re implementing your animations on your web, and lastly, Webflow allows you to create powerful interactions for your animations. What makes the Lottie editor so diverse is that it even allows you to export stickers directly from its base.

Considering all of the points above, sounds like a pretty good tool, isn’t it?

Well, of course, is it.

Remove all your hassle and create and make changes to your animation with ease!