Edit in JSFiddle

;(function($) {
  class AnimatedTabStroke {
    constructor(el) {
      this.element = el;
      this.changePos();
      el.addClass('animated-tab-stroke');
      el.on('click', (e) => {
        this.target = $(e.target.parentElement);
        this.changePos();
      });
    }
    changePos() {
      this.target = this.target || this.getActiveTab();
      let style = getComputedStyle(this.getRoot());
      this.activePos = this.target.position();
      if (!this.activePos) return;
      let {
        left
      } = this.activePos;
      let {
        length
      } = this.getTabs();
      let width = this.target.width();
      let marginLeft = parseInt(style.marginLeft);
      let marginRight = parseInt(style.marginRight);
      this.getStroke().stop().css({
        left: left + marginLeft,
        width
      });
      let scrolled = this.target[0].parentElement.parentElement;
      let {
        offsetWidth
      } = scrolled;
      let scrollLeft = 0;

      if (left <= width) {
        scrollLeft = 0;
      }
      if (left >= width * length) {
        scrollLeft = offsetWidth;
      }
      if (left < width * length && left > width) {
        scrollLeft = left + (width + marginLeft + marginRight) / (left <= offsetWidth ? -2 : 2);
      }
      scrolled.scrollLeft = scrollLeft;
    }
    getRoot() {
      return this.element.find('.nav-tabs')[0];
    }
    getTabs() {
      return this.element.find('.nav-tabs >');
    }
    getActiveTab() {
      return this.element.find('.nav-tabs .active');
    }
    getStroke() {
      return this.element.find('.stroke');
    }
  }

  $.fn.animatedTabStroke = function() {
    return new AnimatedTabStroke(this);
  };
})(jQuery);


;(function($) {
  $('.custom-nav-tabs-wrap').animatedTabStroke()
})(jQuery)

<div class="custom-nav-tabs-wrap">
  <div class="stroke"></div>
  <ul class="custom-nav-tabs nav-tabs flat nav dragscroll">
    <li class="active"><a href="#1" aria-controls="tab-1" data-toggle="tab">Lorem</a></li>
    <li><a href="#2" aria-controls="tab-2" data-toggle="tab">Lipsum</a></li>
    <li><a href="#3" aria-controls="tab-3" data-toggle="tab">amet</a></li>
    <li><a href="#4" aria-controls="tab-4" data-toggle="tab">Lipsum ametos</a></li>
    <li><a href="#5" aria-controls="tab-5" data-toggle="tab">Defero capsula</a></li>
    <li><a href="#6" aria-controls="tab-6" data-toggle="tab">Ingodo</a></li>
  </ul>
</div>

.custom-nav-tabs {
  position: relative;
  border: 0;
  z-index: 5;
  white-space: nowrap;
  & > li > a {
    margin: 0;
    font-family: sans;
    font-size: 17px;
    padding: 20px 36px;
    cursor: pointer;
    color: #2A2934;
    border-radius: 11px 11px 0 0;
    border: 1px solid #CBCBCB;
    border-bottom: 0;
    outline: 0;
    &,
    &:hover,
    &:focus {
      background-color: inherit;
    }
  }
  & > li.active > a,
  & > li.active > a:hover,
  & > li.active > a:focus {
    border: 0;
    background: #fff;
  }
  &.flat {
    border-bottom: 1px solid rgba(198, 195, 195, 0.5);
    outline: 0;
    margin: 0 20px;
  }
  &.flat li {
    margin-bottom: 0;
    float: none;
    display: inline-block;
  }
  &.flat > li > a {
    font-size: 14px;
    padding: 20px 15px;
    cursor: pointer;
    border-radius: 0;
    border: 0;
    border-bottom: 3px solid transparent;
    .transition(all 0.4s ease-in-out);
    @media (max-width: 992px) {
      padding: 10px;
    }
  }
  &.flat > li > a:hover {
    background-color: transparent;
    color: #252527;
  }
  &.flat > li.active > a,
  &.flat > li.active > a:focus {
    border: 0;
    background: #fff;
    border-bottom: 3px solid red;
  }
}

.custom-nav-tabs-wrap {
  overflow: auto;
}

.custom-pagination {
  & li > a,
  & li > span,
  & .disabled > a {
    border: 0;
    color: #434343;
    border-radius: 5px;
    font-family: sans;
    font-size: 16px;
    background-color: transparent;
  }
  & .active > a,
  & .active > span,
  & .active > a:hover,
  & .active > span:hover,
  & .active > a:focus,
  & .active > span:focus {
    background: #585564;
    border-color: #585564;
    color: #fff;
    font-family: sans;
    font-size: 16px;
  }
}

.animated-tab-stroke {
  position: relative;
  .stroke {
    background-color: red;
    height: 3px;
    position: absolute;
    z-index: 6;
    bottom: 0;
    transition: all .8s;
  }
  .custom-nav-tabs {
    &.flat > li.active > a,
    &.flat > li.active > a:focus {
      border-bottom: 0;
    }
  }
}