How To Disable Divi Animation Effects On Mobile Tutorial by Pee Aye Creative

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

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!

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!

Divi Responsive Helper by Pee Aye Creative 2.2
7

Last updated Oct 26, 2021 @ 1:13 am

Subscribe

Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally 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

7 Comments

  1. Rikke

    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

      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

        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

        I am really glad to hear that. Please let us know if you need any other help. 🙂

  2. Philipp

    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?

    Reply
    • Hemant Gaba

      Hey Philipp,

      Could you please share the URL of the page for me to investigate it further?

      Reply
  3. Ron

    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.

    Reply

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart