How To Disable Divi Animation Effects On Mobile

In this tutorial I will show you how to disable Divi animation effects on any devices with some code or our Divi Responsive Helper plugin.

Categories: Tutorials

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.

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!

Divi Responsive Helper Plugin 2.0 by Pee Aye Creative

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

Subscribe On YouTube

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.

View Live Demo

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!

Divi Responsive Helper by Pee Aye Creative 2.1

Last updated Oct 26, 2021 @ 1:13 am

That's it!

I hope you have enjoyed learning How To Disable Divi Animation Effects On Mobile. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!

Subscribe for more stuff like this.

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occassionally we send an extra separate email here and there if we just can't wait! So that's what you will get if you subscribe, and you can always unsubscribe at any time if you just can't take it anymore :)

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

4 Comments

Rikke on October 26, 2021 at 3:05 pm

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
Reply
- Hemant Gaba on October 26, 2021 at 8:58 pm
  
  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. 🙂
  Reply
  - Rikke on October 27, 2021 at 2:21 am
    
    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
  - Hemant Gaba on October 28, 2021 at 9:30 pm
    
    I am really glad to hear that. Please let us know if you need any other help. 🙂