How to use Lottie animations on web

Richard Gres — Mon, 08 Feb 2021 11:04:49 +0000

A guide to web Lottie animations: 5 steps to implement Lottie animations on your website.

5 Steps to implement web animations

There are many reasons why you should use Lottie animation on your website. We summarised some of them in our previous blog post, where you can further understand why we love Lottie so much. One of the benefits is its simplicity of use. If you are afraid to use Lottie animations on your website because of its implementation, don’t worry; we got your back with this simple guideline.

1. Step – Animation file

To implement Lottie animation, first, you need to have the animation itself. All you need is Lottie animation, which comes as a JSON file. Your designer can create animation, or you can simply purchase it or download it for free. If you don’t have any JSON Lottie file, go ahead and check out Lottie animation Market or LottieFiles, sure you find some that fit your style.

2. Step – Test your animation

Before you start implementing your web animation, check if it works properly. Since opening a JSON file doesn’t tell you much, we have created a Preview Lottie tool where you can drag and drop your Lottie animations and quickly see if it’s working correctly. You can also change the background color to simulate the placement of your design better.

3. Step – Implement Scripts

When you have a working Lottie file, you are ready to display it on your web with implementing scripts needed for JSON to be converted to SVG animation. It’s simple as adding any other script library to your HTML page. Here are two options you can go with.

1. Lottie.js github

<script src="https://cdnjs.com/libraries/lottie-web" type="text/javascript"></script>

See a basic implementation here. or See examples on codepen.

Here’s a video tutorial explaining how to export a basic animation and load it on an HTML page

2. LottieFiles web player github

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

See a basic implementation here. or See examples on codesandbox.

4. Step – Load animation in HTML DOM

Scripts are ready, and so your JSON file; let initialize it in HTML code. By adding the path to the JSON animation file.

1. Lottie.js github

<div style="width:1067px;height:600px" class="lottie" data-animation-path="animation/your-animation.json" data-anim-loop="true" data-name="ninja"></div>

2. LottieFiles web player github

<lottie-player src="animation/your-animation.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>

And that’s it; you should see the animation on your page. Simple right? If you are not satisfied with the animations’ behavior, there are still a few things you can adjust.

5. Step – Animation adjustments

Adjustments are possible with both solutions and quite limited but enough for you to tweak it just right.

What can be adjusted:

Speed
Loop
Autoplay
Background-color

BONUS – Tips for performance

We recommend using the CDN link because it has a fast connection response so that your script doesn’t affect the speed load too much.

Adding script ideally to the <footer> section to prevent loading too early.

Preconnect library server in <head> for faster script loading.

<link rel="preconnect" href="https://cdnjs.cloudflare.com/" crossorigin>

First prefetch JSON animation file in <head> for faster loading.

<link rel="preload" as="fetch" crossorigin="anonymous" type="application/json" href="/animation/your-animation.json">

Enjoy your animation!

Original blog here

DEV Community: Richard Gres

How to use Lottie animations on web

5 Steps to implement web animations

1. Step – Animation file

2. Step – Test your animation

3. Step – Implement Scripts

1. Lottie.js github

2. LottieFiles web player github

4. Step – Load animation in HTML DOM

1. Lottie.js github

2. LottieFiles web player github

5. Step – Animation adjustments

BONUS – Tips for performance

Enjoy your animation!