Docs
Best Practices
Best Practices
Best practices for animation development.
This is a work in progress document. If you have any suggestions, feel free to reach out to us.
- Prefer CSS animations over JavaScript animations, unless you need to use JavaScript for complex animations.
- Try to use the
transform&opacityproperties for animations. - Try to make usefull animations, don't overdo it.
- Remember, animations should enhance the user experience, not distract from it.
- Test your animations on different devices and browsers.
- Use the
prefers-reduced-motionmedia query to disable animations for users who prefer reduced motion. - Make sure the components look good in both light and dark mode.
- Make sure the hidden elements are accessible to screen readers.