Embedding Lottie Animations Into Webpages Using Webpack

Airbnb’s Lottie library can be used to render super smooth vector based animations into applications. The following is a guide on how custom Lottie animations can be applied in a web setting that makes use of a bundler like webpack. A working example can be found here.

Turn an animation into a JSON file

There are other options and plugins for creating animation data (Lottie also offers a library of existing animations, some for free), but Adobe After effects with the LottieFile After Effects plugin will get the job done. I won’t go into detail on working with After Effects here, but Design Pilot recorded a great video tutorial on how to get started.

The output from the plugin will look like… a big blob of JSON. Once the file is stored in the project directory somewhere webpack will find it, it can simply be bundled and referenced as a javascript module.

{
    "v": "4.8.0",
    "meta": {
        "g": "LottieFiles AE 3.1.1"
    },
    "sooo": "much more json than this..."
}

Install the package

Because webpack bundles JSON by default without the need for special loaders, an existing configuration shouldn’t need any tweaking.

npm i lottie-web

Render the JSON as an animation

Import the library and JSON module, target an HTML container in a script, and load the animation.

import * as lottie from 'lottie-web';
import animationData from '../assets/animation-data.json';

const container = document.getElementById('animation-container');
lottie.loadAnimation({
  container: container,
  renderer: 'svg',
  loop: true,
  autoplay: true,
  animationData: animationData
});

Pretty neat stuff!

The result is light weight and nice looking animation that would take forever to do by hand – all bundled up using a standard webpack configuration. The sky (ability with After Effects) is the limit.