Subscribe On YouTube

Join other subscribers and enjoy other Divi video tutorials!

How To Disable Divi Animation Effects On Mobile

Nelson Miller Profile Orange
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.

▶️ 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!

Divi Responsive Helper Plugin 2.0 by Pee Aye Creative

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 Plugin by Pee Aye Creative
Categories: Tutorials

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

9 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
  4. Raffi

    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.

    Reply
    • Hemant Gaba

      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?

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart