Your beginner handbook to make and add animations to your web app step by step.

The struggle to write an introduction of an article is probably harder than writing endless lines of css to animate a simple svg illustration. Web animations are satisfying and fun to use, they make users more engaged with your app. But they always come with a price, either time consuming to make with pure CSS, animate an SVG, or use a sprite sheet as twitter did for their heart animation.

Imagine if you can open after-effects, import your SVG, animate it, export it, then simply import it to your web app as an animated svg! Now it is possible with Airbnb's library Lottie for Android, iOS, Web, and Windows. But of course, as usual nothing comes without a price 🤷‍♂️

In this article we will see how to make an animation on After Effects and how to add it to your web app. You can always skip to the second part where you we add a Lottie file to your web app.

I will be using a synth wave design example from the upcoming xHub's website, stay tuned!

1- Creating the animation in after effects

In order to export an animation from after-effects you will need to install bodymovin, refer to Lottie's documentation for how to install.

The website requires a moving synth wave road that loops in the background. Unfortunately the animation we had was a gif, so we needed to recreate it on after effects, main reason why I am writing this section 🎰

Open After Effects

I assume you have installed bodymovin (will be available under window/extensions/bodymvin).

In composition settings set the size to 1920 x 253, or the size you want to set your own animation.
To make the animation easy, I have used the pen tool to draw the vertical lines, with a background of #591445.
Primitive yes, but Lottie has a lot of limitation (the price).

Then add horizontal lines using the rectangle tool. I have added 8 rectangles so I can animate them using position keyframes

Add position keyframes to your animation, and make sure the last frame has the rectangles in the same position of the first frames so the loop looks real

Once you feel comfortable with your animation, go to window/extensions/bodymovin
Once you open it, you will see your composition name listed on the table as seen below, mine is Comp 1.

Click on the 3 green buttons next to your comp name, and select where you want to save your json file. Once done, select the composition by clicking on the radio button under Selected and press render.

Once finished, press done then press the preview button to see if your animation works as expected

If you have reached this far, then you are ready to move to the next (js) section, how to add this Lottie file to your web app

Lottie Limitation

Lottie unfortunately doesn't support all the sweet nice features after-effects provides, I am pretty sure someone will be like, why didn't you use the grid and animate the offset? It is because the limitations 🤷‍♂️

• Lottie does not yet support expressions, or any effects from the effects menu
• No Blending modes or Luma mattes
• No layer styles
• And maybe some you will fin out by yourself

Check their documentation for more information

2- Adding The animation to your web app

If you have skipped the first part, fear not! You still don't need to learn how to make an animation to use one.
Thanks to the community, you can simply download ready animation files for free or paid on LottieFiles

For this article I will be using Next Js, but you can use anything else you want.

We will be using react-lottie to import and show our animation

npm install react-lottie

Create a js file and import react & react-lottie

import React from 'react'
import Lottie from 'react-lottie';

const Animation = () => {
  const defaultOptions = {
    loop: true,
    autoplay: true, 
    animationData: require('../public/lottie/synth.json'),
    rendererSettings: {
      preserveAspectRatio: 'xMidYMid slice'
    }
  }

  return (
    <>
      <Lottie options={defaultOptions} /> 
    </>
  );
};

export default Animation;

We first give options to the <Lottie> Components

loop options [default: false]
autoplay options [default: false]
animationData required
rendererSettings required

If you want to add a className, you have to add it under the rendererSettings

rendererSettings: {
      preserveAspectRatio: 'xMidYMid slice',
      className: 'w-screen mix-blend-luminosity transform scale-125'
    }

For example here I needed to use tailwind blending mode classes to achieve same look in the first picture

And this is the final results using Lottie

With this I believe you are ready to rock some animations 🥳