DEV Community

Shahmir Faisal
Shahmir Faisal

Posted on

3 1

Adding Lottie Animations to Your Website

What are Lottie animations?

Lottie is a JSON-file format for adding animations to your web and mobile applications. Lottie animations are eye-catching and can communicate messages more effectively than images and text. They make the overall user experience a lot more enjoyable. Lottie animations work on the web, iOS, Android, Windows, and React Native, so no matter what device or browser your audience uses, they'll be able to view them.

Examples:

Store Animation

Coding Animation

LottieFiles

LottieFiles is an amazing website where you will find tons of free animations created by designers. And we'll be using their animations for our project. Head over to this page where you will find all the amazing animations. Pick any animation. For our purpose, we'll be using this one:

Coding Animation

Below you will find the ''Lottie Animation URL". This is the URL of the JSON file of this animation. Copy it. But how can we use it?

Using Lottie Animations

LottiFiles has an npm package named as @lottiefiles/lottie-player. You can either import it from CDN or can install it.

CDN

<script src="https://unpkg.com/@lottiefiles/lottie-player@0.4.0/dist/tgs-player.js"></script>
Enter fullscreen mode Exit fullscreen mode

NPM

npm i @lottiefiles/lottie-player
Enter fullscreen mode Exit fullscreen mode
import "@lottiefiles/lottie-player";
Enter fullscreen mode Exit fullscreen mode

Usage

Add the element lottie-player and set the src property to a URL pointing to the JSON file which you copied earlier.

<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_l3sfdi9x.json" ></lottie-player>
Enter fullscreen mode Exit fullscreen mode

It accepts some other properties as well which you can use to control the behaviour of the animation:

<lottie-player src="https://assets4.lottiefiles.com/packages/lf20_l3sfdi9x.json" autoplay loop controls background="transparent" speed="1" ></lottie-player>
Enter fullscreen mode Exit fullscreen mode

You can play around with these properties here.

That's it!

This article was originally published on my hashnode blog.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

👥 Ideal for solo developers, teams, and cross-company projects

Learn more