Spice up your Web App with Animation using Lottie 🔥

Background:

Hi there, Its Naman. I am sure you would have seen animations like this all over the places.

But have you wondered how you can also apply animations like these in your app?

If yes, let me introduce you to one of my favourite libraries i.e, Lottie(created by Airbnb). Lottie is not restricted to Web but also available for Android, iOS, React-Native and many more.🤩

Right now we will look at Lottie implementation in Preact(or you can use React).

Let the hacking begin 👨‍💻👩‍💻 :

Note: Before moving forward make sure you have Node.js installed in your system. I recommend installing Node.js via nvm(Node Version Manager)

1- Create a Preact Project 🛠:

npm i -g preact-cli               //only do this if you don't have preact cli
preact create default my-lottie-app
cd my-lottie-app
npm run dev

You can use create-react-app if using React.

2- Install @lottiefiles/react-lottie-player npm package 📦

npm i lottiefiles/react-lottie-player --save

We are using @lottiefiles/react-lottie-player instead of lottie-web by Airbnb because it provides a clean way(API) to use lottie animations in Preact/React.

Furthermore, there are more wrappers available like react-lottie, lottie-react-web, lottie-react and many others.

3- Introducing lottiefiles.com 🚀



It's a hub for Lottie files. Designers spend a lot of time in building these cool animation for techies all around the world. I do appreciate the hard work they put in designing these creatives.

4- Implementation 🤟

👉 Select your favourite Lottie-file on the above-mentioned website. I am choosing this (by Mikhail Voloshin).

👇 app.js

import { Player } from "@lottiefiles/react-lottie-player";

export default function App() {
  return (
    <div class="container">
      <div class="app">
        Hola <span class="devs">Developers !</span>
      </div>
      <div>
        <Player
          autoplay
          loop
          src="https://assets1.lottiefiles.com/packages/lf20_3vbOcw.json"
          style={{ height: "400px", width: "400px" }}
        />
      </div>
    </div>
  );
}

👇 Code on Codesandbox.io (Full Screen Preview)

👉 Find this code on Github

Note: I cleaned up the unnecessary files, routing structure to keep the demo simple. You can always add your creativity and make it better.

So, that's it. It's that simple and it looks amaaazzing. That's why I ❤️ it.

That's it for today. Feel free to provide any type of feedback. I do appreciate that. Meanwhile, you can find me on Twitter @InsaneNaman.

Signing off. See you soon.

Comments

[Stefano Cerelli]

The problem with Lottie is that the lib its super heavy! It really impacts the bundle size and most of the time you can get the same results using animejs

[Naman Gupta]

Thanks for pointing this out. I do agree with you. Lottie files comes at a cost. Tho I have heard about Anime.js many times but never worked with it. Looks like i need to try that out.