DEV Community

Mohmed Ishak
Mohmed Ishak

Posted on • Updated on

How To Easily Use Animations From Cool Designers In Your Web App?

Alt Text

The truth is, to have cool animations in your web app like loading animation, you don't need to be a good designer cause we've got designers who do that and you just need to get some help from them.

Ever Heard Of Lottie Files?

Alt Text
Lottie Files is an animation library from Airbnb where it is web developers' go-to site to look for awesome animations, use it in our app and then pretend like we did it from scratch to non-techies.

Anyway, here's how to use it in your React project.

Step 1:

Add this package to your dependency

npm i react-lottie
Enter fullscreen mode Exit fullscreen mode
Step 2:

Head over to https://lottiefiles.com/search?q=loading&category=animations and select any animation. Download the file in JSON format and keep it in your project directory, preferably in a folder named assets.

Step 3:

Create an animation component- in this case a loader component (you can literally copy & paste the code snippet below and it'll work but be sure to import the right JSON file).

import Lottie from "react-lottie";
import animationData from "../assets/6472-loading.json";

function Loader() {
  const defaultOptions = {
    loop: true,
    autoplay: true,
    animationData: animationData,
    rendererSettings: {
      preserveAspectRatio: "xMidYMid slice",
    },
  };

  return <Lottie options={defaultOptions} height={100} width={100} />;
}

export default Loader;
Enter fullscreen mode Exit fullscreen mode
Step 4:

You probably know how to use this now. One common use case is to have a boolean variable like isVisible and show this component depending on the value like:

{ isVisible && <Loader /> }
Enter fullscreen mode Exit fullscreen mode

Top comments (13)

Collapse
 
shaijut profile image
Shaiju T

This is cool, Thanks for sharing. 😄. Can we do the same in plain Javascript ?

Collapse
 
ishakmohmed profile image
Mohmed Ishak

Yeah, it works in VanillaJS (and React Native too).

Collapse
 
reallynattu profile image
Nattu 🇲🇻

Thanks for suggesting LottieFiles @ishakmohmed . Most of our team is based out of KL too and good to see more dev posts coming up from here.

Collapse
 
ishakmohmed profile image
Mohmed Ishak

Wlc man 😃

Collapse
 
ishakmohmed profile image
Mohmed Ishak

Damn, just realized you're the co-founder of Lottie Files. Respect bro. 👏👏👏

Collapse
 
cswalker21 profile image
cswalker21

Oh, cool, thanks. Truth is I love doing little animations when I have spare time, but I’m no designer. It would take me ages to do something like that— 😂

Collapse
 
ishakmohmed profile image
Mohmed Ishak

Check out Framer Motion, you'll write very less code and be able to come up with cool animations.

Collapse
 
peterlunch profile image
Peter

Love me some lotto files, recently used some in a react native app and they were great.

Collapse
 
ishakmohmed profile image
Mohmed Ishak

yeah 😜

Collapse
 
aalphaindia profile image
Pawan Pawar

Keep sharing!!

Collapse
 
ishakmohmed profile image
Mohmed Ishak

Sure, thank you! 😃

Collapse
 
gabrieljosehernandez profile image
Gabriel Hernández

Awesome, to my bookmarks, thanks.

Collapse
 
ishakmohmed profile image
Mohmed Ishak

Thanks for the support!