<!-- mobian-agent-page publisher="dailydev" canonical="https://daily.dev/posts/how-to-use-lottie-animations-react-js--l8etpb-ny" -->

---
title: How to use Lottie animations &amp; React JS? | daily.dev
description: Lottie is a library created by Airbnb to facilitate the creation of animations for different platforms. Lottie files work on any device and can be scaled...
canonical: https://daily.dev/posts/how-to-use-lottie-animations-react-js--l8etpb-ny
twitter:card: summary_large_image
twitter:site: @dailydotdev
og:type: website
og:site_name: daily.dev
og:title: How to use Lottie animations &amp; React JS? | daily.dev
og:description: Lottie is a library created by Airbnb to facilitate the creation of animations for different platforms. Lottie files work on any device and can be scaled...
og:url: https://daily.dev/posts/how-to-use-lottie-animations-react-js--l8etpb-ny
og:image: https://api.daily.dev/og/posts/l8eTPB-nY.png
og:image:alt: How to use Lottie animations &amp; React JS?
og:image:width: 1200
og:image:height: 630
og:locale: en
---

> ## Documentation Index
> Fetch the complete documentation index at: https://daily.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# How to use Lottie animations & React JS?

**[Community Picks](https://daily.dev/sources/community)** · 7 min read · 227 upvotes · 9 comments

## Summary

Lottie is a library created by Airbnb to facilitate the creation of animations for different platforms. Lottie files work on any device and can be scaled without loss of quality, just like an SVG file. The big difference between animated GIFs and Lotte files is that GIFs are made up of images and Loti files are generated through code in a JSON file.

## Full article

daily.dev links to this article rather than hosting it. Read it at the original source: <https://dev.to/franklin030601/how-to-use-lottie-animations-react-js-cn0>

## Community discussion

Top comments from developers on daily.dev.

**@serjeel** · 4 upvotes

> https://lottiefiles.com/animation/websites , here are many lottiefiles to download from for your next project.

**@ngorana** · 3 upvotes

> Amazing content. Thank you for saving me some time of research.

**@pukima** · 2 upvotes

> Definetly gonna use it in my next Project!

**@kkurko** · 2 upvotes

> That's nice and simple explanation of how to use Lottie animations. I like that performance concern was mentioned and we need to remember about overall site performance

**@mailingdelgado** · 2 upvotes

> Thanks for this jewel.

## Similar posts on daily.dev

- [Don’t just attend KubeCon \+ CloudNativeCon, Merge Forward your experience\!](https://daily.dev/posts/don-t-just-attend-kubecon-cloudnativecon-merge-forward-your-experience--l0rpp73x8) · CNCF · 1 upvotes · 0 comments
- [Announcing H2 2026 KCDs](https://daily.dev/posts/announcing-h2-2026-kcds-m96goajm1) · CNCF · 1 upvotes · 0 comments
- [Two months of Open Community Groups](https://daily.dev/posts/two-months-of-open-community-groups-asf52zhbs) · CNCF · 0 upvotes · 0 comments

---

Tags: [#react](https://daily.dev/tags/react), [#javascript](https://daily.dev/tags/javascript)

[View this post on daily.dev](https://daily.dev/posts/how-to-use-lottie-animations-react-js--l8etpb-ny)

```json
{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]}
{"@context":"https://schema.org","@type":"TechArticle","headline":"How to use Lottie animations & React JS?","url":"https://daily.dev/posts/how-to-use-lottie-animations-react-js--l8etpb-ny","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-to-use-lottie-animations-react-js--l8etpb-ny"},"datePublished":"2022-07-16T02:55:09.990Z","dateModified":"2023-12-07T12:02:45.284Z","description":"Lottie is a library created by Airbnb to facilitate the creation of animations for different platforms. Lottie files work on any device and can be scaled...","image":"https://res.cloudinary.com/practicaldev/image/fetch/s--SndPbgP0--/c_imagga_scale,f_auto,fl_progressive,h_500,q_66,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vslyfc6odyrltxzri7e1.gif","thumbnailUrl":"https://res.cloudinary.com/practicaldev/image/fetch/s--SndPbgP0--/c_imagga_scale,f_auto,fl_progressive,h_500,q_66,w_1000/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vslyfc6odyrltxzri7e1.gif","isAccessibleForFree":true,"articleSection":"Community Picks","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Community Picks","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1655817725/logos/community","url":"https://daily.dev/sources/community"},"commentCount":9,"discussionUrl":"https://daily.dev/posts/how-to-use-lottie-animations-react-js--l8etpb-ny","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":227},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":9}],"keywords":"react,javascript","timeRequired":"PT7M"}
{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Community Picks","item":"https://daily.dev/sources/community"},{"@type":"ListItem","position":3,"name":"How to use Lottie animations & React JS?"}]}
{"@context":"https://schema.org","@type":"WebPage","@id":"https://daily.dev/posts/how-to-use-lottie-animations-react-js--l8etpb-ny","comment":[{"@type":"Comment","text":"https://lottiefiles.com/animation/websites , here are many lottiefiles to download from for your next project.","datePublished":"2022-07-16T04:50:30.150Z","url":"https://daily.dev/posts/l8eTPB-nY#c-CFXAe0wg5","author":{"@type":"Person","name":"Serjeel Ranjan","url":"https://daily.dev/serjeel","image":"https://avatars.githubusercontent.com/u/74287984?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":4}},{"@type":"Comment","text":"Amazing content. Thank you for saving me some time of research.","datePublished":"2022-07-16T16:29:02.048Z","url":"https://daily.dev/posts/l8eTPB-nY#c-5DCZx6PNt","author":{"@type":"Person","name":"Ngoran Aristide","url":"https://daily.dev/ngorana","image":"https://lh3.googleusercontent.com/a-/AFdZucqNu7PBZH6y9SfVXGc6MQjnlibb-cwPfFrgPA-7JA=s100"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":3}},{"@type":"Comment","text":"Definetly gonna use it in my next Project!","datePublished":"2022-07-20T12:12:52.478Z","url":"https://daily.dev/posts/l8eTPB-nY#c-SAE7u8q8T","author":{"@type":"Person","name":"Jaron","url":"https://daily.dev/pukima","image":"https://avatars.githubusercontent.com/u/58347116?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"That’s nice and simple explanation of how to use Lottie animations. I like that performance concern was mentioned and we need to remember about overall site performance","datePublished":"2022-08-09T15:21:08.999Z","url":"https://daily.dev/posts/l8eTPB-nY#c-Ii6Qi7y6-","author":{"@type":"Person","name":"Kirill Kurko","url":"https://daily.dev/kkurko","image":"https://avatars.githubusercontent.com/u/58859242?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}},{"@type":"Comment","text":"Thanks for this jewel.","datePublished":"2022-07-22T03:50:02.559Z","url":"https://daily.dev/posts/l8eTPB-nY#c-qQxHisgx1","author":{"@type":"Person","name":"MailingDelgadoMedina","url":"https://daily.dev/mailingdelgado","image":"https://avatars.githubusercontent.com/u/40926855?v=4"},"interactionStatistic":{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2}}]}
```