Disabling Animations in Visual Builder

Written by Dan Mossop

The Divi Theme's visual builder overlays the front-end view of your website with a range of buttons, borders and popup modal boxes which can be used to manipulate the webpage. These elements are animated onto the page, often scaling from zero height and visibility to full size and visibility, often accompanied by a "bounce" animate at the end. While stylish, you might find yourself getting tired of all the animations and perhaps wanting to save yourself waiting the few milliseconds they take to play out. Fortunately there is a built-in Divi setting for disabling the animations.

To disable the animations, simple click on the "three vertical dot" menu button in the visual builder, and then set "Builder Interface Animations" to "Off". Close the settings, save your page in visual builder and you're done.

Smooth Page Transitions for Divi & Extra!

Bring a touch of elegance to your Divi or Extra website with the Divi Transitions plugin. Enjoy seamless fade, zoom, and wipe effects that work smoothly with back button and new tabs. Perfect for creating a refined user experience without slowing down your site.

About Dan Mossop

Dan is a Scottish-born web developer, now living in Brisbane with his wife and son. He has been sharing tips and helping users with Divi since 2014. He created Divi Booster, the first Divi plugin, and continues to develop it along with 20+ other Divi plugins. Dan has a PhD in Computer Science, a background in web security and likes a lot of stuff, 

12 Comments

  1. When turning this option off – saving and exiting the visual builder – the setting is not retained when I return. Basically turns it back on. I have checked all my animations and for some reason (even though all are set to none) – i still see my menu and navigation animating in on ever reload.

    I can't figure out where or how this is happening – I even tried the CSS provided in the comment above. Nothing seems to work and the setting in this post resets itself every time.

    Is there any solution to turning these animations off?

    Reply
    • Hey Jason, one thing to watch out with the option is that you don't have any the visual builder open in any other tabs / windows. These tabs will likely have the option turned on and when saved they would revert the setting. Other than that, I'm not sure what would cause it, though I'd be happy to take a look if you're willing to share a login via the contact form.

      Note that the option is just for the animation of the visual builder control buttons / module settings popups, etc. It doesn't have any impact on the front-end of the site. If the menu / navigation are animating on the front-end (i.e. when not editing in the visual builder) then that is a separate issue – one that the CSS is seeking to address. In this case, if you're able to share a link to an example page, I'll take a look and see if I can figure out what to do about it. Thanks!

      Reply
  2. I already built the site. So that function doesn't help at this stage.

    Anyone know a good script to completely disable all-aninations?

    Reply
    • Hey Tron,

      Are you talking about the front-end module animations – i.e. the Advanced Animation Options?

      If so, I think you should be able to disable them with this CSS:

      .et_pb_section, .et_pb_row, .et_pb_module {
          -webkit-animation: none !important;
          -moz-animation: none !important;
          animation: none !important;
      }
      

      Add it into the "Divi > Theme Options > General > Custom CSS" box, or anywhere else that loads before the page render starts.

      Hope that helps, but let me know if not. Thanks!

      Reply
  3. Found it, guys the issue is in the builder language translation.
    In my italian version the switch is named "Gestione Interfaccia" and like most of italian translation it is an incorrect translation.
    Try to find any switch named "Interface Management" or your language translation version of.
    I tryed to bring to elegant theme support the translation problem but never got answers.

    Reply
    • Hey Ivan, great to hear you were able to work it out and thanks for sharing the solution! Hopefully ET will do a review of their translations at some point :)

      Reply
    • Hey Trondur, I can still see the option the latest Divi (v4.14.7), and can't see any particular reason the option wouldn't be showing… If you're willing to send a login through the contact form, I'd be happy to take a look and see if I can spot what's going on. If that's not possible, let me know and I'll try to offer an alternative. Thanks!

      Reply
  4. Thanks, this is what I was just looking for. Looks like switching it off, helps the builder loading twice. Finnaly! :)

    Reply
    • Hi Ada, I'm glad it helped. Interesting that it fixed the double loading for you. My understanding of the double loading is that it is Divi refreshing it's browser-side cache of the module settings, and occurs in response to changes in those module settings. So I'm not sure what part enabling / disabling animations would play… I'll have to do some testing and see if I can work it out :)

      Reply
  5. Hi there, i have the latest Version of Divi Theme (4.9.4) installed and the Button IS JUST NOT THERE. I got another 20 Site running with Divi and the option to turn off the Animations in the visual builder is not there? Do you have an answer for this? With kind regards – Billy Löwe

    Reply
    • Hi Billy, I don't I'm afraid… I've just checked on my test sites and can still see (and use) the setting as described in the post. If you have an example site I can login to please feel free to send details through the contact form and I'll be happy to take a look and see if I can spot what's going on. Thanks, Dan.

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.

Latest Posts

Set Custom CSS IDs for Individual Divi Accordion Items

Assigning unique CSS IDs to specific Divi Accordion items allows for precise control over styling, targeting, and linking within your page content. This ability is particularly useful when you want to apply custom designs or create anchor links to particular accordion...

Enable Swipe Navigation in the Divi Gallery Lightbox

Enabling swipe navigation in the Divi Gallery module's lightbox allows users to seamlessly browse through gallery images by swiping left or right, creating a more interactive and mobile-friendly experience. This functionality can significantly improve user engagement...

Disable Slide-In Animation for Divi Gallery Grid Images

Control how images appear in your Divi Gallery module by toggling the slide-in animation effect for grid layouts. Disabling the slide-in animation allows gallery images to load instantly and appear statically, providing a faster and distraction-free browsing...

Control Image Count Display in Divi Gallery Lightbox

Displaying or hiding the image count in the Divi Gallery module’s lightbox can help customize the user experience, depending on whether you want to give visitors an indication of gallery progress or prefer a cleaner, distraction-free view. The ability to toggle this...

Hide Gallery Image Titles in the Divi Lightbox Overlay

Displaying image titles in the lightbox overlay of the Divi Gallery module can sometimes be distracting or unnecessary, depending on your website’s design and user experience goals. Hiding these titles creates a cleaner and more focused viewing experience for visitors...

Random Posts