Turn Off Divi Animation Effects
Divi has an option to use animation effects in all the sections, rows, and modules in the Divi Builder. These effects can be nice and pleasing, but they can also look bad, and even affect performance on mobile. So in this tutorial I am going to show you how to disable the Divi animation effects on any device using CSS snippet.
▶️ Please watch the video above to get all the exciting details! 👆
FYI: You can do this with a setting directly in the Divi Theme Options with our popular Divi Responsive Helper plugin! Take a look, it is so easy!
Disable Divi Animations On Mobile With A CSS Snippet
Missing Responsive Settings
Most Divi settings have responsive options to enable or disable on Desktop, Tablet, and Phone, but not animations! That’s right, if you use animations they are automatically enabled for all devices sizes. This may concern you, and it probably should. Our goal is to preserve the effects on desktop, but disable them on mobile. To do this, we are going to use a CSS snippet.
If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on Where To Add Custom Code In Divi.
@media all and (max-width: 981px) {
.et_animated {
opacity: 1 !important
}
.et_pb_section * {
-o-transition-property: none!important;
-moz-transition-property: none!important;
-webkit-transition-property: none!important;
transition-property: none!important;
-o-transform: none!important;
-moz-transform: none!important;
-ms-transform: none!important;
-webkit-transform: none!important;
transform: none!important;
-webkit-animation: none!important;
-moz-animation: none!important;
-o-animation: none!important;
animation: none !important;
}
}Once you add the snippet, you are done! Unless you want to customize the media query.
Live Demo
You can check the live demo of this on our Divi Responsive Helper demo site. The demo is using the plugin, but it is the same for the code method. To check this properly, you will want to check on both desktop and mobile to see the difference.
Disable Divi Animations On All Device Sizes
The snippet above is made for disabling animations on Tablet and Phone sizes, but what if you just want to disable all animations across your site? Sure, you can do that easily. Just remove the media query from the snippet. The media query is forcing the CSS code to only apply at screen sizes smaller than 981px, so by removing the media query the CSS code will apply to all sizes.
Do It With A Setting!
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
HI there, thanks so much for the code. Unfortunatly this does not work for Scroll Effects – do you have another blog articel for that?
Hi Sabrina,
We don’t have any solution for the scroll effects at this point, but that is a good idea. We will add it to our list to consider.
Hi, I’m very happy with this CSS, thank you so much.
Can you confirm that unfortunately this has no effect on the animation launch delay parameter? In my case, the effect is deactivated, but the element suddenly appears at the end of the configured delay time.
Hi Raffi!
Yes, the animation delay can’t be changed with the above code. More customizations are needed for it. However, the elements need to be displayed instantly by adding the above code. If that is not the case on your end, can you share the URL of the page?
When I tried this I went from 13 animations down to only two. Many elements moved to new locations. But there was no reduction in time or cls impact. I still need to figure out what the two remaining animations are and turn them off.
I’m doing this on a test site with a bare minimum page to establish a baseline.
I was trying to disable the annoying transition in the Divi tabs module using this technique but couldn’t get it to work. Any ideas?
Hey Philipp,
Could you please share the URL of the page for me to investigate it further?
You’re wrong 😉 This IS exciting!
I have been looking for this solution for a few years. Thank you so SOO much for this!
But – there is one small problem. I have a small slider on my home page that doesn’t work on mobile when this CSS is enabled. Do you have a workaround for that?
Best,
Rikke
Hi Rikke,
I have investigated the issue and the optimum solution for this is to first go to the Section Settings of the section which contains the slider and then in the Advanced Tab > CSS ID & Class, place the Custom Class. For example, the custom class you placed is pa_slider_section.
Now change the selector in the code given in the guide from .et_pb_section * to .et_pb_section:not(.pa_slider_section) * and the code will have no effect on the section containing the slider.
If you want to stop the floating animation then you can use this code:
.pa_slider_section{
-webkit-animation: none!important;
-moz-animation: none!important;
-o-animation: none!important;
animation: none !important;
}
Let me know how it goes. 🙂
Hi Hermant
Thank you very much for the solution and extra snippet for the floating animation 😉
Your solution solved the problem. I can now use the slider arrows to browse the slides on mobile 🙂
Best
Rikke
I am really glad to hear that. Please let us know if you need any other help. 🙂