How To Disable Divi Animation Effects On Mobile

If you're running into this post you might've learned that animations on Divi can't be turned off on mobile. I'm not sure why, but hopefully it's fixed on Divi 5. You also might've ran into a couple tutorials that turn off all animations on mobile which is a bit heavy handed. I personally like fade in animation on mobile but the slide in animation on my header looked really bad on mobile.

So let's kill animations on a specific class in Divi! You'll want to label your div with the class of .kill-ani. Then copy and paste this CSS below into your theme options. This will target any div with a mobile animation and prevent it from doing so without eliminating the desktop animation.

@media all and (max-width: 981px) {
  .kill-ani .et_animated,
  .kill-ani .et_pb_module,
  .kill-ani .et_pb_animation {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .kill-ani {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}

How To Disable Divi Animation Effects On Mobile