Display animation

Brienne Wong
Brienne Wong
  • Updated

You may want to document such things as transitions, loading states, micro animations or prototypes in your design system. There are several ways that this can be done.


Lottie Files

You can embed Lottie animations. Full instructions are here. This way animations can also be created in After Effects, exported to Lottie with a plugin then displayed in zeroheight.

Lottie animation example


You can also embed prototypes using the embed function.

prototype example


You can upload these via the Image / GIF selector in the tool panel.

Gif example



You can embed videos of your animations such as from YouTube, Vimeo or Loom.

Code previews

You can also display motion using live HTML / CSS /JS previews.

Code preview example


You may want to create a table to document patterns of transitions or loading states with text or diagrams.




200 - 300ms


400 - 500ms

Page Transitions

700 - 900ms

Further reading


A great article on what to include when documenting motion. Suggestions include documenting motion principles in addition to documenting the implementation of the motion through durations, ranges and rhythms.



Despite what it says in the title it's a great 4-step guide on how to document motion in your design system. Includes auditing, principles, building blocks and translation specs.


Can I hide the code below the Lottie animation?

Yes! We recently added a feature so that you can now collapse/hide the code below the animation.

Can I pause GIFs?

No, it's not possible at this moment.

Can I autoplay videos?

Yes. You can append the src part of the URL with &autoplay=1.

Was this article helpful?