How to Make the vis-timeline pan-x smooth and eased?

Question

i'm using the vis-timeline library. In the documentations there is no property for easing the touch pan-x when navigating the timeline, resulting in a stiff and rigid navigation.

I tried this:

timeline.on('rangechange', function(properties) {

  var windowStart = timeline.getWindow().start;
  var windowEnd = timeline.getWindow().end;

  var distance = properties.event.deltaX * properties.event.velocityX;

  var newWindowStart = windowStart.valueOf() - distance;
  var newWindowEnd = windowEnd.valueOf() - distance;

  timeline.setWindow(newWindowStart, newWindowEnd, {
    animation: {
      easingFunction: 'easeInOutQuad'
    }
  });
});

How can i implement an eased panX navigation?

Answer 1

Ok, i find a solution.

Here's my code:

    timeline.on("rangechanged", (properties) => {
      if (properties.event) {
        let distance =
          properties.event.deltaX *
          Math.abs(properties.event.velocityX);

        let newWindowStart = new Date(
          properties.start.valueOf() - distance * 100000000
        );
        let newWindowEnd = new Date(
          properties.end.valueOf() - distance * 100000000
        );

        timeline.setWindow(
          newWindowStart,
          newWindowEnd,
          {
            animation: {
              duration: 500,
              easingFunction: "easeOutQuad",
            },
          }
        );
      }