Animation

How they work

Currently, animations rely on lottie.js, an animation library created by engineers at Airbnb. If you want to learn more about lottie, how it works and how to use it. You can go here.

All you really need to know for now though, is to make sure to load the lottie javascript library before any custom javascript:

<script src='https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.0/lottie_light.min.js'></script>

Creating and Exporting a lottie animation

If you want to export your animation for use in a step you will need to export the JSON file from your animation tool. We recommend using After Effects to create your animations. In order to export a lottie animation from After Effects you need to install the lottiefiles plugin. You can find simple instructions on how to do so here.

Source the JSON file

In order for lottie to work it needs to reference a JSON file which contains the data to render the animation. This will get generated from applications such as After Effects and Haiku.

The path to the JSON file will be referenced in the HTML:

data-json='diagnostic.json'

The “diagnostic.json” would then be updated with the path to the json file.

Looping an animation

In order to loop an animation, this again can be changed in the html. Just set data-loop='false' to ‘true’ and the animation will then loop.