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

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?

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

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;

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 /> }

Comments

[Shaiju T]

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

[Mohmed Ishak]

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

[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.

[Mohmed Ishak]

Wlc man 😃

[Mohmed Ishak]

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

[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— 😂

[Mohmed Ishak]

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

[Peter]

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

[Mohmed Ishak]

yeah 😜

[Pawan Pawar]

Keep sharing!!

[Mohmed Ishak]

Sure, thank you! 😃

[Gabriel Hernández]

Awesome, to my bookmarks, thanks.

[Mohmed Ishak]

Thanks for the support!