csswordpresstabstransitionwpbakery

WP Bakery Tab Animation Override


I am trying to override WP Bakery's tab animations, which slides content vertically in and out of view. I am a front end designer with limited JS experience. The site runs a theme, but from what I can tell in the code, the tabs and animations are coded as Bakery components.

Just looking for some code to override this thing! Reference to this ability seems to be completely unavailable elsewhere from my research. Thanks!


Solution

  • I was able to remove the vertical animation from the visual composer bakery tab and pageable container components by using this CSS. I had to specify top and bottom css classes depending on the position of the tabs. This example is verbose to show how to over-ride the vertical animating on all popular browsers. Essentially you need to set transform and transition to none on the .vc_tta-panel-body. I wanted to add a custom fade in effect to the panels so I added the fadein animation to the same css classes below the transform and transition over-rides.

    
    .wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-top .vc_tta-panel .vc_tta-panel-body,
    .wpb-js-composer .vc_tta-tabs.vc_tta-tabs-position-bottom .vc_tta-panel .vc_tta-panel-body {
        -webkit-transform: none; 
        -moz-transform: none; 
        -ms-transform: none; 
        -sand-transform: none; 
        -o-transform: none; 
         transform: none; 
        -webkit-transition: none; 
        -moz-transition: none; 
        -o-transition: none; 
        transition: none; 
        animation: fadein 2s;
    }
    
    @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
    }