Docs

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 & opacity properties 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-motion media 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.