Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Photo & Video
  2. Animation

How to Edit Lottie Animations for Free in Your Browser, After Effects Not Required

by
Read Time:5 minsLanguages:

In this quick tutorial you'll learn how to customise animations quickly and easily with the free browser-based Lottie Editor, for use across websites, apps and more.

What is a Lottie Animation?

A Lottie animation is a JSON (JavaScript Object Notation) file, an open standard file format that uses text that's easily readable by people in order to store and transmit animations and other data. In simpler terms, this type of file format lets designers include high-quality, scalable animations with very small file sizes on any platform, including web pages, just as easily as static objects.

As Lottie is free and open source, you can easily use it across any platform, using either generated code from importing a Lottie file that you’ve created or customised, or by 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. 

Llet’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 EditorLottie EditorLottie Editor
Lottie Editor

To demonstrate, I’m using Animated Online Education Icons from Envato Elements, which 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 set I downloaded, which is represented by a tablet or e-reader with writing, and a ribbon bookmark at the top. The animation is via the writing – which appears and disappears – and the ribbon which does the same. There are three colours featured, the blue of the tablet screen, dark blue in the outline and yellow for the bookmark.

open icon animationopen icon animationopen icon animation

You can see my options for customising the icon, laid out on the right. 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. What you do need to be aware of, though, is it won’t auto-adjust the remaining dimension based on you changing the other, so you need to work out what the right size for height and length is. In this case, it’s a straightforward square, so I can change the dimensions by the same amount and proportionally it will still look right: here they’re changed to 1000 x 1000.

animation preferencesanimation preferencesanimation preferences
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 increase the animation, you’ll just increase the length of the whole thing and it'll look like this:

Blank animationBlank animationBlank animation
Blank animation

Sticking with 60FPS, if you were to put in 100 for the duration, your animated icon would last for 2.5 seconds and then would 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 settingsPlayback settingsPlayback settings
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 colourBackground colourBackground colour
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 changeColour changeColour change
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.

ExportExportExport
Export

Now you have your customised animation to use wherever you like!

More Great Animation Resources

Keep learning about online animations with these resources:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.