Updates 12 Nov 2019  ■1 Comment

Introducing the Lottie Editor

We are super excited to announce the LottieFiles Editor!!

Animations across your web and app platforms can be a great way to create a positive user experience and engage your audience at a whole new level. However, for engineers, building animations in can be tedious and daunting, more so when changes are requested.

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

It is a diverse tool that even lets you export stickers directly from the editor itself.

Take any layer from your animation and easily change its colors with the Lottie Editor.

To take advantage of our Lottie Editor, either choose an animation from our large library of premium animations or simply upload your own and then select the tab “edit layer colors” while previewing your selected animation.

What can you do with the Lottie Editor?

Change Layer Colors

With the Lottie Editor, you can take any layer from your animation and easily change its primary or gradient colors.

You can take any layer from your animation and easily change its colors. A lot of the time a single layer can have multiple colors in it depending on the design composition, and some may even have gradient layers. With the Lottie Editor changing any colors within a layer is as easy as pie, just select the color you want to change and in the blink of an eye your animation could have a whole new colorful look. It’s that simple!

Hide Layers

Simplify your animations further and hide layers you don’t need.

Simplify your animations further and hide layers you don’t need. This is handy especially when it comes to using public animations where you’d want to get rid of the layer acting as the background color and replace it with the transparent background we know most prefer. Find the layers you want to change, and hide and unhide them as you desire.

Text layers

With the Lottie Editor, we’ve made it super easy for you to pick a text layer and edit its copy.

While Lottie supports text rendering, it is hard (and not to mention time consuming) for any engineer to go through the code to update text in animations. This is one of the main reasons as to why we don’t tend to see much use of editable text on Lottie.

But thankfully, we’ve made it super easy for you to pick a text layer and edit its copy. Just one note, for this to work please do make sure the animations are exported with text data instead of glyphs (you can do this when exporting your animation with Bodymovin: go to the settings of the composition you want to export and uncheck the glyphs option).

Telegram Stickers

You can easily export animated Telegram stickers using the Lottie Editor.

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.

Today, we are taking things one step further by supporting Telegram’s animated stickers on our Lottie Editor. As Telegram has its own requirements for its stickers, we have made sure to implement these within the editor to make life even easier for you.

We let you resize the animation to 512 x 512, set the frame rate to either 30 or 60 FPS, and adjust the duration to 3 seconds (if your animations are longer) to ensure they pass as a valid Telegram animated sticker. That’s all you need :)

Now what are you waiting for? Get started with the Lottie Editor today!

We can’t wait to see what you create. And don’t forget to share your creations with us on social media using #BuildWithLottie

Lots of love,

LottieFiles

P.S. Telegram, we Lottie you. <3

Comments