Scrolling the page with tabbed content

I have some tabbed gallery on my site, which was made using jQuery. When I try to scroll the page, while being in the gallery section with an active image tab, the scrolling is really laggy.
Can you please try to help me fix this? Here's a part of the code which is responsible for the tabbed gallery:
HTML (Jade):

article.content-box.gallery#osom
  ul#homepagetabs.gallerytabs(data-tabs="tabset1")
    li.tabs#tab7(data-tab="t1")(style="background-image: url('http://static1.gamespot.com/uploads/original/1551/15511094/3066900-legends-1940x1095.png')")
  #tabset1.gallery             
    #t1.tab.is-acive.current(style="background-image: url('http://fastup.pl/data/Aueternum/Rzeczy%20cyca/maxresdefault.jpg')")

CSS (Stylus):

.tab
  display none
  animation: animacja
  animation-duration: .3s
  animation-iteration-count: 1
  animation-timing-function: ease-in-out
  animation-fill-mode: both
  &.is-active
    display block
    width: 100%
    height: 85vh
    background-position: center
    background-size: cover
    border: 5px solid $pink
.gallerytabs
  display: flex
  margin: 0
  padding: 0
  align-items: center
  width: 100%
.tabs
  flex: 1
  height: 70px
  margin: 25px 5px
  background-position: center
  background-size: cover
  border: 1px solid $pure-pink
  filter: grayscale(100%)
  transition: 0.3s ease-in-out
  position relative
  z-index 1
  &:hover
    filter: none
    cursor: pointer
  &.is-active
    filter: none
.gallery
  width: 100%
  height: 100vh

JS (jQuery)

$('[data-tab]').on('click', function() {
  var $btn = $(this).attr('data-tab');
  var $wrapper = $(this).parent().attr('data-tabs');
  var activeClass = 'is-active';
  $('[data-tabs='+$wrapper+']'+' [data-tab]').removeClass(activeClass);
  $('[id='+$wrapper+']'+' .tab').removeClass(activeClass);
  $(this).addClass(activeClass);
  $('[id='+$btn+']').addClass(activeClass);
});

Here you have the page to see the laggy effect.