Disabling Animations in Visual Builder

|

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.

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

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 *.