Spice up your Web App with Animation using Lottie 🔥
Tags: webdev, animation, preact, javascript
Published: 2020-09-07 11:02:27

### Background: 

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c2gwbhlctjhuuflx4pva.gif)
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](https://airbnb.io/lottie/)(created by [Airbnb](https://www.airbnb.com/)). Lottie is not restricted to Web but also available for [Android](https://github.com/airbnb/lottie-android), [iOS](https://github.com/airbnb/lottie-ios), [React-Native](https://github.com/react-native-community/lottie-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)](https://github.com/nvm-sh/nvm)

1- Create a Preact Project 🛠:   
```shell
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](https://reactjs.org/docs/create-a-new-react-app.html#create-react-app) if using React.

2- Install `@lottiefiles/react-lottie-player` npm package 📦
```shell
npm i lottiefiles/react-lottie-player --save
```
  

We are using [@lottiefiles/react-lottie-player](https://www.npmjs.com/package/@lottiefiles/react-lottie-player) instead of [lottie-web by Airbnb](https://github.com/airbnb/lottie-web) because it provides a clean way(API) to use lottie animations in Preact/React.   
Furthermore, there are more wrappers available like [react-lottie](https://www.npmjs.com/package/react-lottie), [lottie-react-web](https://www.npmjs.com/package/lottie-react-web), [lottie-react](https://www.npmjs.com/package/lottie-react) and many others.

3- Introducing [lottiefiles.com 🚀](https://lottiefiles.com/)   
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/yyz15vt7emahv3nawn09.gif)   
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](https://lottiefiles.com/31548-robot-says-hello) (by [Mikhail Voloshin](https://www.instagram.com/art.voloshin_/)).   

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2jsvt06711hcv47wtp3i.gif)   

👇 app.js
```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](https://codesandbox.io/s/lottie-preact-hv41x?file=/components/app.js) ([Full Screen Preview](https://hv41x.csb.app/))
{% codesandbox lottie-preact-hv41x module=/components/app.js %}

👉 Find this code on [Github](https://github.com/InsaneNaman/blogz/tree/master/02-%20Spice-up-your-webapp-with%20-lottie)

`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](https://twitter.com/InsaneNaman).

Signing off. See you soon.