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.
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.
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.
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:
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.
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.
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.
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.
Now you have your customised animation to use wherever you like!
More Great Animation Resources
Keep learning about online animations with these resources:
10 Top Lottie Animation Templates for After Effects
10 Top Character Animation Kits for After Effects: Cartoon Bone Rigging Templates
3 Ways to Colour Grade Cartoon Animation Using After Effects
10 Top Freelance Scene Animation Templates for After Effects
How to Build a Coming Soon Page With Lottie Animations
How to Add Adobe After Effects Animations to a Web Page
