Animation React-only
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.
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
srcprop.
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.