WP Bakery Tab Animation Override

Question

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!

score 6 · Accepted Answer · answered Dec 26 '20 at 18:03

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; }
}

Thanks Ian, nice to know that there's no JS involved! – MBar Jan 01 '21 at 18:45 — MBar, Jan 01 '21 at 18:45

score 1 · Answer 2 · answered Nov 27 '18 at 12:45

1

Found this CSS snippit via Google which states:

.vc_tta-panel.vc_animating {
    opacity: 0;
}

This hides the vertical animation, am also looking for a JS fix.

answered Nov 27 '18 at 12:45

DGRFDSGN

575
1
8
20

1

I found that using the code above does remove the default animation. This solution, combined with applying Bakery's basic animation feature to the child elements of the tab container, animates the content when changing tabs. However, it only animates the content when entering, and not exiting. Ian has a smoother fade effect, I think. – MBar Jan 01 '21 at 18:45

WP Bakery Tab Animation Override

2 Answers2