Add animation on tabs

[tzi]

Hi @nico3333fr!

I used this plugin on https://netalis.fr and I had to add a fade in/out animation.

Sadly, to achieve that I had to wrap the content in an extradiv tag.
Here the code I used, maybe it could help you or someone else:

.js-tabcontent {
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  transition: visibility 0s 0.4s, opacity 0.4s 0.4s;
}

.js-tabcontent > div {
  transition: margin-top 0s 0.4s;
}

.js-tabcontent[aria-hidden=true] {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 0.4s, opacity 0.4s;
}

.js-tabcontent[aria-hidden=true] > div {
  margin-top: -10000px
}

Thanks for creating and maintaining this project!
Thomas.

[nico3333fr]

Hello,

I didn't have the case, until today => I had to adapt a little your idea, however it works perfectly thanks to you. Thanks a lot ;)

Nicolas

[runnickrun]

Is it possible to get the direction of switch (e.g. left or right) and animate accordingly with fade from left / right?

Thanks for the great plugin!

[nico3333fr]

As far as I know, no. :-\ @tzi maybe an idea?

[tzi]

It's not possible with the current state of this plugin 😞
You have to check if the previous tab was to the left or the right and add the associated class name here.