DEV Community

loading...

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

ishakmohmed profile image Mohmed Ishak ・2 min read

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 file, 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

Discussion (11)

pic
Editor guide
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 Author

Wlc man πŸ˜ƒ

Collapse
ishakmohmed profile image
Mohmed Ishak Author

Damn, just realized you're the co-founder of Lottie Files. Respect bro. πŸ‘πŸ‘πŸ‘

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 Author

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

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 Author

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

Collapse
aalphaindia profile image
Pawan Pawar

Keep sharing!!

Collapse
ishakmohmed profile image
Mohmed Ishak Author

Sure, thank you! πŸ˜ƒ

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 Author

yeah 😜