Lottie is a revolutionary file format that expands your ability to incorporate animation on web pages. Unfortunately, HTML 5 doesn’t render JSON-based animations, so we must work with a plugin from Bodymovin and some JavaScript to help handle the new file format.
In this post, we provide you with step-by-step instructions on how to find premium Lottie animations and add JSON files to your HTML projects. The process is straightforward but can be frustrating if you’ve never worked with JSON. Our guide is the most comprehensive, easy-to-follow tutorial online and serves as your foundation for working with JSON animation files.
Let’s get started!
Find a Premium JSON Animation
The first step is to find a high-quality Lottie animation to add to your web page. We are working within the Creattie library, where you will find a diverse assortment of premium animated illustrations and icons in cohesive design packages.
Creattie is an excellent option for designers who want to capture a consistent aesthetic throughout a project without using recycled artwork. In addition, you can customize the animations, so they fit the branding on your pages.
Navigate to Creattie.com
![creattie website](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/632369ac0271c_dk.hahws.png)
Select ‘Lottie Animations’ from the homepage.
Toggle ‘Show as collections’ to browse cohesive design packages.
![creattie item filter](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/632369ed1f07e_zwhfqp7s.png)
Click the collection you want to use; we’re picking the ‘Animated Remote Work Illustrations.’
![animated illustration design set](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236a1cf2f1e_fvjsph7k.png)
Choose your Lottie animation.
![freelancer lottie animation](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236a3a00f3f_ygaoouoq.png)
Customize Colors
Now that you’ve picked the perfect design for your project, you can customize the colors to fit the web page. We’ve taken color IDs directly from our web page and pasted them into Creattie’s color editor.
![creattie editor](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236a729ece1_oicxwznw.png)
Download Your JSON File
Once you’ve finished customizing your animation, click ‘Download.’
A pop-up appears with 3 file options (JSON, GIF, MP4). Choose ‘JSON’ and proceed to click ‘Download Now.’
![lottie download options](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236ad6451b6_odlqypuw.png)
The file will start downloading, and you’ll be redirected to the design product page. Now you should have the option to ‘Embed’ or ‘Download’ under the color customizer.
![embed options](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236b5488ce4_f2bmvyhw.png)
Creattie allows you to choose how you want to incorporate your Lottie designs. You can embed the code or work with a JSON file. When embedding, you can change the animation's parameters from the Creattie editor. The options are below:
Today we are working with the JSON file, but you can check out our article about embedding Lottie animations into an HTML page for more information.
Once you’ve downloaded your JSON file, add it to your project directory.
![add JSON to project directory](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236ba5cdb1e_mbpr40ma.png)
Paste Bodymovin CDN to Header
Navigate to your HTML page.
![how to paste bodymovin CDN to header](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236bd481aa3_k7reimxg.png)
We’re using a template built with Bootstrap 5 from Start Bootstrap. We’ll add our Freelancer Lottie animation to the template page below.
![homepage animation](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236c42ccf07_byk6cpae.png)
Copy and paste the Bodymovin CDN below into your header with a script tag. You can also find the latest version here.
![editing lottie in html](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236ca35c53c_xpxa9shm.png)
The player is what renders the JSON animation; without it, the function will not work.
Add a Container
Now we can start coding!
The first step is to create a container for our animation. Copy the code below if you are following along and paste it to the section you want to edit.
Under your container, create a script tag. Within the tag, create a variable that calls our function. Get ready; this is where the magic happens!
Call the Bodymovin.loadAnimation Function
Our variable's value is the function that will contain our parameters. You can copy and paste the entire script below.
var animation = bodymovin.loadAnimation({
container: document.getElementById('animation-container'),
path: 'Freelancer.json',
renderer: 'svg',
loop: true,
autoplay: true,
name: "Demo Animation",
});
The Bodymovin documentation has all the details you need to know to customize Lottie animations from an HTML page. In this tutorial, we are just rending the animation but be sure to check out their repository on GitHub.
Pass Parameters into the Function
The parameters below are required for the JSON animation to render. Make sure your container name matches up, and your file is spelled correctly with the correct path.
- Container: where the animation lives on the page
- Path: the file path of your JSON file; ours is in the root directory
- Renderer: how the animation will render on the page
- Loop: you can choose 'true,' 'false,' or a numerical value (for customizing the animation path in the JSON file)
- Autoplay: choose 'true' or 'false'
Set Up a Live Server
Everything in your HTML should be ready to go; at this point, you would likely want to check if the file is rendering on your local server. However, most browsers will block JSON animations and return an error saying your file has been blocked by CORS policy.
No need to worry; we can solve the problem by setting up a live server. If you use VS Code, add the extension 'Live Server.' Once downloaded, you can click 'Go Live' on the footer of VS Code with your HTML page open.
![live server](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236dc9a0121_d.iptpcq.png)
![go live with server](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236dde50d44_a8rbiara.png)
Now your default browser should automatically bring up your webpage.
Marvel at Your Amazing Work!
Congratulations! You've just added a JSON file to HTML!
As you can see, our animation is massive.
![review lottie animatoin](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236e1785c03_kbp3lzq8.png)
You can make adjustments to the container to change the size.
![edit homepage with lottie](https://d1jj76g3lut4fe.cloudfront.net/uploads/images/63236e3a6ce89_eklfc5s4.png)
Here's the final code snippet:
var animation = bodymovin.loadAnimation({
container: document.getElementById('animation-container'),
path: 'Freelancer.json',
renderer: 'svg',
loop: true,
autoplay: true,
name: "Demo Animation",
});
Final Words
While adding a JSON file to HTML is far more complicated than embedding the code, you have more options to customize the animation once you’ve figured out the Bodymovin plug-in. We highly recommend learning to incorporate JSON animation files if possible because you have more freedom to manipulate the code beyond changing the speed, delay, and trigger.
If you are ready to increase user engagement with Lottie animations, try Creattie today for free.