Tips And Tricks

Disable CSS animations

Every animation added begs the question, “How can we disable it for certain scenarios?” These scenarios can pop up when the application is running on a small or low-performing device, or perhaps if the user has their motion preference set to reduced motion.

Luckily, there’s an easy way to disable CSS animations based on any criteria we need. We can add any necessary logic in our application to check whether it meets the criteria or not and, if it does, we can disable the animations by adding a class that sets the animation property to none.