add_action( 'wp_footer', function() { if ( ! defined( 'ELEMENTOR_VERSION' ) ) { return; } ?>

lottie animation designer

Browse around below for JSON animations (web and development-ready). Learn best practices, FAQs, and uses. All the animations on this page are lottie animation examples.

Need an animation? Get in touch using the form below.

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).

Table of Contents

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  XcodeSwift, or another iOS development platform you can easily add in your JSON animation. 

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.

JSON Animation using Lottie Format

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. 

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. 

Get In Touch

Questions and Conversations

Submit Your Project Info

Questions, comments or feedback on anything you’ve seen here. I’ll get back to you as soon as possible.