Blog

Right here you will study to simply customise animations with the free browser-based Lottie Editor. Use them throughout web sites, apps, and extra.

What’s a Lottie animation?

A Lottie animation is a JSON (JavaScript Object Notation) file, an open customary format that is simply readable by folks. It makes use of textual content, and shops and transmits animations and different knowledge.

It helps you to add high-quality, scalable animations with very small file sizes throughout platforms. It is as simple as including static objects.

Lottie is free and open supply. You may simply use it throughout any platform, together with net pages, in two other ways:

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

What’s the Lottie Editor?

You can also make Lottie animations from scratch or by adjusting current templates in After Results, however what if you happen to don’t have the power to do this? That’s the place the Lottie Editor is available in.

You may drop a Lottie animation file proper into the browser and make modifications, earlier than exporting your animation once more. It’s fast and it couldn’t be simpler. 

Let’s check out the way it works.

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

Open Lottie Editor and import your JSON

While you open the Lottie Editor you’ll see the choice to drop your JSON file into the browser, or to navigate to the place it’s saved.

Lottie Editor

To show, I’m utilizing Animated On-line Schooling Icons from Envato. This obtain features a JSON model of the animated icons.

Drop your JSON file into the browser.

The enhancing display

I’ve dropped within the ‘eBook’ icon from the icons set, which is represented by a pill with writing, and a ribbon bookmark on the prime. The animation is through the writing and the ribbon, each of which seem and disappear.

There are three colors: blue for the display, darkish blue within the define, and yellow for the bookmark.

You may see my choices for customising the icon, laid out on the correct of the Lottie Editor. Let’s begin with animation preferences.

Animation preferences

The size are simple, it’s the dimensions you need the icon to be. Lotties are scalable, so you may make it larger or smaller with out dropping any of the standard or definition.

Remember that it received’t auto-adjust the remaining dimension based mostly on you altering the opposite. That you must work out the correct dimension for peak and size.

On this case, it’s a simple sq.. I can edit the size by the identical quantity and it will keep proportional: right here they’re modified to 1000×1000.

Animation preferences

Length will change robotically as soon as you alter Body Charge. For instance altering the Body Charge to 60 (from 30) will half the Length. Double the FR, half the period.

You may then manually change the period to extend it, however you received’t really make your free Lottie animations longer. You’ll simply improve the size of the entire thing and it will appear to be this:

Clean animation

Sticking with 60FPS, if you happen to have been to place in 100 for the period, your animated icon would final for two.5 seconds. It could then disappear, and there’d be empty area for the remaining time (7.5 seconds).

As you make modifications, bear in mind to click on Replace to see them.

Playback settings

If you wish to improve the Playback Pace, use the choice beneath Playback Settings, clicking on it would scroll by means of 1 to 2.5 x.

Background color

You can even change the background color right here. Doing this may also help with seeing any extra delicate colors, just like the define of the e-reader.

Though it does allow you to manually put in a hex quantity, it received’t really change to it, you may solely select black or white.

Change colors

That is in all probability the choice that’ll be essentially the most helpful to you, the power to vary the color of the icon to match your model or web site design.

What number of choices you see right here will depend upon what number of colors seem within the icon. On this case it’s three, the darkish blue of the define, a lighter blue for the display and yellow for the ribbon bookmark.

Color change

In case you have the hex codes for colors that you just use, you may put them in right here. If not, you may select manually. You’ll must Replace after every color change or it may be slightly glitchy and miss a change.

Export

While you’re blissful together with your modifications, go to Export As Lottie JSON and click on the obtain icon.

Export

There you go! A personalized animation to make use of wherever you want.

Extra nice animation sources

Now you know the way to create a free Lottie animation. Continue learning about on-line animations with these sources: