Animation React-only

Open in Storybook

The Animation component powered by Lottie allows to add animations in an easy way. For designers, animations can be created in Adobe After Effects and exported as a .json file.

By default, the Animation will auto-start in a loop. In case prefers-reduced-motion setting is enabled, autoplay is disabled and only the last frame of the animation is shown.

Loading demo…

Rules For Developers

Colour and size can be specified if needed. In case a colour is set, multichromatic animations will become monochromatic.
If no size is specified the Animation will fit into its parent container.
If the parent container has a dynamic size, the dimensions of the original animation file will be used.
A path to an external lottie json file can be passed using the src prop.

Rules For Accessibility

Keep most animations under 5 seconds.
For looping animations, they shouldn’t take a huge amount of room on the page.
Make sure people can easily skip or move away from a page with animations if they need to.