3D Location Icon
3D Location icon animation. Created initially in Blender, 3D software and imported to Adobe After
lottie animation designer
Browse around below for Lottie (JSON) animations. Learn best practices, FAQs, and uses. All the animations on this page are Lottie animation examples.
Get in touch to receive a free quote or ask questions.
Recent Lottie Animation Examples:
(browse more below)
See Example
Animated Cogs
Animated cogs rotating, in Lottie format for the web, iOS or Android development. Colors, dimensions
Heart Icon
Animated heart icon in Lottie format. a GIF-style looping animation designed for the web, ideal
Shield Lottie Design
Blue lottie shield design, created in Adobe Illustrator and animated in After Effects. Created to
Confetti Lottie
Color burst animation, confetti floating upwards. Colors and direction can be customized. Get in touch
Lottie Checkmark Success
This Lottie checkmark success animation features a green color gradient background and additional animation that
Table of Contents
what are lottie animations
Lottie animations were initially developed by AirBNB, yes that AirBNB. “Lottie Files” is an iOS, Android, and React Native library that allows you to seamlessly integrate animations into your app. The great thing about Lottie is that it renders the animation via vector graphics which makes the file size incredibly small while providing a crisp and high-quality image.
Lottie has become extremely popular over the past few years because it solves a big problem with how animations are typically used online. In the past, developers would have to create separate images, GIF or video files for each animation. This process was time-consuming and often resulted in large file sizes that could slow down an app.
With Lottie, all you need is a single animation file that can be easily integrated into your app. This means that your app will load faster and use less data.
File size is also a huge improvement, especially in loading times, vs. the traditional GIF format. Lottie animations are typically around 1/10th of the size of a GIF, which can be a significant difference when you’re dealing with larger file sizes and want to have a good page load speed (for SEO).
transparent lottie animations
If your lottie animation is not transparent there’s a good chance that the design file was not created properly. The most common mistake is to create your Illustrator file with a solid background color, instead of a transparent background.
Another possibility is that the edges of your composition are not trimmed properly. When you trim your composition in After Effects make sure that your cropped preview does not have anything chopped of the edges.
can i convert GIF to JSON/Lottie?
The short answer is yes, but the long answer is that it might not be worth it.
There are many online tools and sites that promise to do the conversion for you, but in my experience, they don’t always work as intended. We’ve found that the quality of the GIF will almost certainly be impacted, in a negative way.
I would recommend starting from scratch in After Effects if you can, it will give you much more control and the end result will be of a higher quality. GIFs, also do not support a ‘clean’ background transparency like JSON files do.
how to use lottie animations (Check with Your Devs)
To actually use a Lottie animation, you need to reference the file in your code. For example, if you wanted to use the JSON file we just exported in an HTML file, you would do something like this:
<html>
<head>
…
</head>
<body>
<lottie-player
src=”animation.json”
background=”transparent”
speed=”1″
style=”width: 300px; height: 300px;”
loop autoplay></lottie-player>
</body>
</html>
This is just a basic HTML example and your code requirements will be different. I would check with your local developer on how to best implement it. There are many page builder plugins these days that make it easy to add Lottie animations without having to code, so definitely explore those options as well.
Whether you are using Xcode, Swift, or another iOS development platform you can easily add in your JSON animation.
- Web
- iOS
- Flutter
- React Native
- Xamarin
- NativeScript
- Windows
- Vue
- Angular
- QT
- Skia
- Framer X
- Sketch
What does a lottie animation look like
In a nutshell, JSON (stands for Java Script Object Notation), compresses what looks like robot language (shown below) to a moving animation. All the animations on this page are Lottie/JSON formats.
Here’s an example snippet of rendered JSON data in the screenshot below. As you can tell, if you don’t know code, it looks like a bunch of random snippets of chaos. The JSON format (shown below) needs a player or code to tell it what to do and how to interact with.
how to add JSON/Lottieanimations to wordpress
If you’re using WordPress (this site does for example) to build and convey your information, there are a few plugins and page builders that support Lottie animations. LottieFiles has their own plugin for just this purpose. There is also Elementor (it comes with a Lottie widget these days), as well as ‘Bodymovin’ plugin.
how to create a lottie animation
So you want to create a Lottie animation? Great! It’s actually a lot easier than you might think. In this section, I’ll walk you through the steps involved in creating your own. It all starts in a vector design program like Adobe Illustrator. However, you may also use Sketch or any other vector design program that can be exported. Here’s my process:
So you want to create a Lottie animation? Great! It’s actually a lot easier than you might think. In this section, I’ll walk you through the steps involved in creating your own. It all starts in a vector design program like Adobe Illustrator. However, you may also use Sketch or any other vector design program that can be exported. Here’s my process:
create vector artwork & Design
First, you’ll need to create your vector artwork. This can be anything from a simple icon to a complex illustration. I use Adobe Illustrator to layout, and engineer the individual components. Take the spacecraft at the top of this page. It’s not just one image layer inside, there are actually quite a few individual pieces moving together (from the rotating lights to the moving gears).
prepare vector layers (Separate individually)
Once you have your vector artwork created, it’s important to prep your design file for animation. This is where you’ll decide how each element will move and what kind of animation it will have. Those individual components that you created in the previous step need to be split into their own layers. The reason for this being, each layer will be animated individually. It’s important to name your layers because you’ll need to reference them later when setting up your animation.
In my case, I like to use a naming convention that includes the type of movement and the object it’s applied to. For example, “ROTATE LIGHTS” or “MOVE UP GEAR2.” This helps me keep track of what’s going on and makes it easier to find the layer I’m looking for.
export to animation software
Once you have your layers prepared inside Illustrator, it’s time to export them to Adobe After Effects, for animation. This is the program that we’ll use to animate our artwork. If you’re not familiar with After Effects, don’t worry, it’s actually a pretty simple program to use once you get the hang of it.
Import your Illustrator file into After Effects. To do this, go to File > Import or use the shortcut cmd + I.
It’s also important to create a new composition inside After Effects.
animate using keyframes
ow That your layers are imported into After Effects, you can begin animating them.
There are a few different ways to animate your layers in After Effects, but for the purposes of this tutorial, I’m going to focus on two of the most popular methods: keyframes and shape layers.
Keyframes are the basic building blocks of animation in After Effects. They are used to create animations by setting specific values at specific times. For example, if you wanted to animate a layer from left to right, you would set a keyframe at the beginning of your composition for the left position and another keyframe at the end for the right position. In between those two keyframes, After Effects allows you to control the speed, motion, direction and many other variables.
export animation to JSON Format
Once your animation is finalized to your liking, inside After Effects, it’s time to export. Remember, we need JSON format so we’re going to use a plugin that exports in this format directly from After Effects. The name is “bodymovin” and it allows you to tweak the export settings of the JSON file to wherever you may need (will vary based on your project requirements).
creation done.
And that’s it! You should now have a JSON file that you can use in any project you need.
interactive lottie animations
Adding interactivity to your lottie can be something like ‘play on hover’ or something a bit more complex like animating to the scroll position.
Lottie autoplay animations are quite often seen, looping as animated icons and illustrations on websites. But you can also use Lottie to create more complex animations like on hover or scroll triggered animations.
To add some interactivity, you need to use a little bit of JavaScript. Again I would recommend to consult with your local developer on how to best implement, there are many page building plugins these days that come with the needed Javascript built in so you don’t have to code it yourself.
how to loop lottie animations
If you’re wondering how to loop your JSON (Lottie animation) once it’s loaded, you need to add a few lines of code. If you are using HTML, you can do something like this:
<script>
lottie.loadAnimation({
container: document.getElementById(‘lottie’), // the dom element that will contain the animation
renderer: ‘svg’,
loop: true,
autoplay: true,
path: ‘data.json’ // the path to the animation json
});
</script>
This code is telling the player to start playing automatically and to loop infinitely. I will stress that if you don’t know code, there are TONS of other ways to add Lottie animations to your projects without having to write a line of code.
LottieFiles even created their own plugins so that implementing these animations to your sites are far faster.
how to resize a lottie animation
If you need to resize a Lottie animation, the best way to do it is in your code. You can use the ‘ Width’ and ‘Height’ properties to control the size of the animation. However, if you are using a page-building software (like Elementor) you can simply drag and resize the width as needed. Resizing a Lottie animation is one of the easier tasks to do with Lottie.
benefits of lottie format
These two factors sum up the benefits of JSON vs. a GIF animation. JSON is about 100x smaller than a GIF and supports full background transparency. This means that no matter what color your background of your site is, the animation will overlay on top without the clunky borders.
Is Lottie Better Than GIF?
YES, Lottie is better than GIF format mainly when used for websites and app development.
The reason that Lottie’s are an improvement over GIF is due to their smaller file size. Lottie allows for a crisper animation (not to mention full background transparency), unlike a GIF animation. The caveat here is that Lottie animations need a bit more technical know-how when installing but most web developers will be able to help you out during your build.
where to get lottie animations
If you’re looking for JSON animations, there are many places to go. First and foremost, find a designer that can export the animations in JSON format, or a developer that can create animations. Some ideas to start could be a platform such as Upwork or other contractor sites.
Alternatively, if you like some of the samples above and around the rest of the site here, feel free to get in touch and I would be glad to field some questions and quote you out based on the requirements.