Snippets

Snippet: Disable the WPBakery Tabs and Tours Animation

  • Updated:
Important: In Total 6.0 these animations are disabled by default - yay!! So no need for any custom code. If you wish to re-enable the animations you can do so via the Customizer > WPBakery tab.

By default the WPBakery page builder adds an animation to their tabs and tours which is a bit old school and can sometimes cause an unwanted "jumpy" affect. Luckily you can easily disable the animation with a little CSS. The example below shows how you can disable the animation (first part of the code) or how to change the animation so it uses a simple opacity (show/hide) effect.

/* Disable WPBakery Tab/Tour animation */
.vc_tta-panel.vc_animating {
     opacity: 0;
}


/* The following code can be used to add a fade animation */
.vc_tta.vc_general .vc_tta-panel.vc_active .vc_tta-panel-body {
    animation: vctabsAnimate 1s cubic-bezier(0.4, 0, 0.6, 1) 1;
}


@keyframes vctabsAnimate {
    0% {
        opacity: 0;
    }

    100% {
        display: block;
        opacity: 1;
    }
}
Learn how to add custom CSS to your site.
Back To Top