---
title: Best Practices
date: 2024-06-24
description: Best practices for animation development.
---

<Callout>
  This is a work in progress document. If you have any suggestions, feel free to reach out to us.
</Callout>

1. Prefer CSS animations over JavaScript animations, unless you need to use JavaScript for complex animations.
2. Try to use the `transform` & `opacity` properties for animations.
3. Try to make usefull animations, don't overdo it.
4. Remember, animations should enhance the user experience, not distract from it.
5. Test your animations on different devices and browsers.
6. Use the `prefers-reduced-motion` media query to disable animations for users who prefer reduced motion.
7. Make sure the components look good in both light and dark mode.
8. Make sure the hidden elements are accessible to screen readers.
