Velocity - Horizontal scroll - transitionX ends too fast

Question

I want to have a list of items, where if I hover over the right side, it scrolls horizontally through the list. And does the same if I hover over the left side just in the other direction.

(And it the future, it will show a counter of how many items are left, and if I can see the last item, the "hoverable" area won't be visible anymore.)

I managed to have the scrolling, but the timing is not good yet. I want an ease-in-out effect:

• a bit slow at the beginning
• faster in the middle (but still readable)
• low at the end.

I use Velocity.js, here is the code example:

$(".tab__more").hover(function(){
  var max_width = parseInt($('.tabs__nav').css('max-width'));

  var $tablist = $(".tabs__nav ul");
  var listItems = $tablist[0].children;
  var widths = 0;
  for(var i = 0; i < listItems.length; i++)
    {
      widths += parseInt($(listItems[i])[0].scrollWidth);
    }

  var scrollWidth = (widths-max_width+10)*-1 + 'px';
  $(".tabs__nav ul").velocity({translateX: scrollWidth}, { duration: 5000, easing: [0.52,0.15,0.7,0.95] });

}, function(){
  $(".tabs__nav ul").velocity("stop");
});

$(".tab__less").hover(function(){
  $(".tabs__nav ul").velocity({translateX: 10}, { duration: 5000, easing: [0.52,0.15,0.7,0.95] });  
}, function(){
  $(".tabs__nav ul").velocity("stop");
});

Codepen link: https://codepen.io/lordblendi/pen/yzzjZR

Answer 1

There was also an animation in the css transition: all 0.3s ease-in-out;

That caused two to fire.