How to edit Lottie animations for free in your browser, After Effects not required

Here you’ll learn to easily customise animations with the free browser-based Lottie Editor. Use them across websites, apps, and more.

What is a Lottie animation?

A Lottie animation is a JSON (JavaScript Object Notation) file, an open standard format that’s easily readable by people. It uses text, and stores and transmits animations and other data.

It lets you add high-quality, scalable animations with very small file sizes across platforms. It’s as easy as adding static objects.

Lottie is free and open source. You can easily use it across any platform, including web pages, in two different ways:

using generated code from an imported Lottie file that you’ve created or customised
using a pre-made animation

What is the Lottie Editor?

You can make Lottie animations from scratch or by adjusting existing templates in After Effects, but what if you don’t have the ability to do that? That’s where the Lottie Editor comes in.

You can drop a Lottie animation file right into the browser and make changes, before exporting your animation again. It’s quick and it couldn’t be easier.

Let’s take a look at how it works.

How to customise Lottie animations with the free, browser-based editor

Open Lottie Editor and import your JSON

When you open the Lottie Editor you’ll see the option to drop your JSON file into the browser, or to navigate to where it’s saved.

Lottie Editor

To demonstrate, I’m using Animated Online Education Icons from Envato. This download includes a JSON version of the animated icons.

Drop your JSON file into the browser.

The editing screen

I’ve dropped in the ‘eBook’ icon from the icons set, which is represented by a tablet with writing, and a ribbon bookmark at the top. The animation is via the writing and the ribbon, both of which appear and disappear.

There are three colours: blue for the screen, dark blue in the outline, and yellow for the bookmark.

You can see my options for customising the icon, laid out on the right of the Lottie Editor. Let’s start with animation preferences.

Animation preferences

The dimensions are straightforward, it’s the size you want the icon to be. Lotties are scalable, so you can make it bigger or smaller without losing any of the quality or definition.

Be aware that it won’t auto-adjust the remaining dimension based on you changing the other. You need to work out the right size for height and length.

In this case, it’s a straightforward square. I can edit the dimensions by the same amount and it’ll stay proportional: here they’re changed to 1000×1000.

Animation preferences

Duration will change automatically once you change Frame Rate. For example changing the Frame Rate to 60 (from 30) will half the Duration. Double the FR, half the duration.

You can then manually change the duration to increase it, but you won’t actually make your free Lottie animations longer. You’ll just increase the length of the whole thing and it’ll look like this:

Blank animation

Sticking with 60FPS, if you were to put in 100 for the duration, your animated icon would last for 2.5 seconds. It would then disappear, and there’d be empty space for the remaining time (7.5 seconds).

As you make changes, remember to click Update to see them.

Playback settings

If you want to increase the Playback Speed, use the option under Playback Settings, clicking on it will scroll through 1 to 2.5 x.

Background colour

You can also change the background colour here. Doing this can help with seeing any more subtle colours, like the outline of the e-reader.

Although it does let you manually put in a hex number, it won’t actually change to it, you can only choose black or white.

Change colours

This is probably the option that’ll be the most useful to you, the ability to change the colour of the icon to match your brand or site design.

How many options you see here will depend on how many colours appear in the icon. In this case it’s three, the dark blue of the outline, a lighter blue for the screen and yellow for the ribbon bookmark.

Colour change

If you have the hex codes for colours that you use, you can put them in here. If not, you can choose manually. You’ll need to Update after each colour change or it can be a little glitchy and miss a change.

Export

When you’re happy with your changes, go to Export As Lottie JSON and click the download icon.

Export

There you go! A customised animation to use wherever you like.

More great animation resources

Now you know how to create a free Lottie animation. Keep learning about online animations with these resources:

Post date October 20, 2021

This content originally appeared on Envato Tuts+ Tutorials and was authored by Marie Gardiner

Here you'll learn to easily customise animations with the free browser-based Lottie Editor. Use them across websites, apps, and more.