Lottie-web to deliver awesome animations in your website

You probably found in the homepage a lossless quality waving animation. This is not a GIF, a video or a CSS animated image. It is a lottie animation that you can start using without too much setup.

Preface

On September 2021 I started one of the biggest projects I have worked on so far, not just in Factorial, but in my whole developer career. We had been redefining our new brand for months and the implementation phase was finally starting!!

We decided to tune our design system in desktop application, mobile app, public pages and our blog to be “brand friendly”. Guess who was the dev that was working on his own (aimed by designers and the brand team of course) to complete that “simple” task... 😅

Whatever, I’m deviating from the original topic. Lottie animations. One request that brand team had for the rebranding was that we change the login process on our desktop application, which currently is a bouncing logo animated with CSS. Which is fine so far, but a big change like what we were about to build needs a proper presentation for the user.

Idea

I talked about this with a Motion Designer (a completely new role for me) from Brand Studio team and he told me that he can generate some animation for me and bring me the file. And at first I thought he was talking about a GIF file, and I started wondering about things like how it would look like on different screen sizes, how to compress it to avoid delivering a monstrous file, ... But he send me a JSON file and I was like wtf 🤨

Here I discovered that Lottie files are really a thing, and they remove several layers of friction between designer and developer when working with animations:

The designer delivers a complete animation so the developer won’t spend a second touching any kind of CSS. This means that the original design and the final result are exactly the same.

The developer has full control over the animation. From code you can decide when to play, stop, rewind, adjust the speed, play on loop, ... This opens a world of possibilities to improve UX in your website, by providing interactive and more engaging blocks of information.

AFAIK it is possible to deliver a compressed file (something I haven’t tried yet) in gzip format. This makes it easier to deliver more complex lottie animations without adding much overhead to some page. → Despite this, it is always recommended to work with short animations, because for longer ones the size increases a lot.

Code

The code to load an animation is quite simple actually, I mostly copied this answer from user Danila in StackOverflow. You only need three main things to make this work:

Install and load the lottie-web package → You can install using npm or yarn

Have a lottie animation → You can find many free to use in lottiefiles.com

Create the element in which your lottie animation will be loaded → In my case I’m using a simple div with some width restrictions to avoid flickering.

import type { LottiePlayer } from 'lottie-web'

export const LottieLoader = ({
  animationName,
  loop = true,
  autoplay = true
} : Props) => {
  const ref = useRef(null);
  const [lottie, setLottie] = useState<LottiePlayer | null>(null);

  useEffect(() => {
    import('lottie-web').then(Lottie => setLottie(Lottie.default))
  }, []);

  useEffect(() => {
    if (lottie && ref.current) {
      const animation = lottie.loadAnimation({
        container: ref.current,
        renderer: 'svg',
        loop: loop,
        autoplay: autoplay,
        path: `/lotties/${animationName}.json`
      });

      return () => animation.destroy();
    }
  }, [lottie, animationName, autoplay, loop]);

  return (
    <div ref={ref} className={cn(
      'items-center',
      configWidth[animationName] // To avoid flickering
    )}/>
  )
}

Credits

This post is created thanks to many people, so I want to thank them individually:

Sergio Cabañero for showing me the world of Lottie animations. Check his profile, his works are simply amazing.

Danila from StackOverflow for posting a perfectly explained code that saved me some time dealing with possible bugs.

Dima Oris and Sheikh Sohel for creating and uploading the two amazing Lottie files I’m using in my personal website.