Tabs Element: Animated Content on Change

How To
1

I would like to add an ease-in animation to the content area of a tabs element when different tabs are selected - preferably using the Bricks native animation functions. Does anyone know how or if this can be accomplished?

I have a working version using custom code - but wondering if there is an easier way to add it to the Bricks native tabs element.

1 Like
2

Hi Brandon,
the easiest way is to use a CSS animation. A simple transition doesn’t work, because the tabs are hidden with display: none, and a transition doesn’t work when transitioning from that state. But the CSS animation does :slight_smile:

Add the following to the custom CSS of your tab element and see it fading in from the bottom:

root .tab-content.active {
    animation: slide-down 1s ease-out;
}

@keyframes slide-down {
    0% { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
}

As animation you can build the wildest things with this tool: https://webcode.tools/generators/css/keyframe-animation

Best regards,
timmse

2 Likes
3

Thank you so much! I will give it a try later on and confirm. Thanks!

4

@timmse It worked (with slight modification). Thanks!

For anyone referencing this post - I had to make the following adjustment to the code (replaced .tab-pane with .tab-content):

root .tab-content.active {
    animation: slide-down 2s ease-out;
}

@keyframes slide-down {
    0% { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
}
1 Like
5

Oh darn, yes you are right. I just adjusted my code above as well.

6

Didn’t work for me. I think classes have change with new releases. This worked though:

root .tab-pane.brx-open {
    animation: slide-down .6s ease-out;
}

@keyframes slide-down {
    0% { opacity: 0; transform: translateY(100%); }
    100% { opacity: 1; transform: translateY(0); }
}
1 Like
7

Hi all,

How would you add closing animation to tabs?
I’d like to fade out the open tab before opening the new one.

As there’s no .brx-close class, I don’t know how to do this.

I just don’t know if it is even possible to do it before the display: none;…

TIA