在水平滚动部分上进行FTScroller交互后如何更新anime.js时间轴

Question

我正在尝试使网站上的某个部分可以通过触摸或鼠标交互进行水平滚动，并且还可以使用anime.js

自动滚动

FTScroller已启用触摸/鼠标滚动，anime.js设置了自动滚动行为，但是一旦我使用FTScroller与该部分进行交互，它就会恢复为之前的先前位置。

我尝试销毁FTScroller实例，但没有其他选择可以看到，将当前X值从FTScroller传递给anime.js时间轴，以便在将其移动到用户。

var scroller = new FTScroller(document.getElementById('scrollable'), {
  scrollingY: false,
  snapping: false,
  scrollbars: false,
  bouncing: false
});


var tl = anime.timeline({
  easing: 'linear',
  duration: 95000,
  autoplay: true,
  loop: true
});

tl
  .add({
    targets: '.ftscroller_x',
    translateX: -3600,
  })


$('#sectionwrapper').on('touchstart hover', function(e) {
  tl.pause();
});

$("#sectionwrapper")
  .mouseenter(function() {
    tl.pause();
  });
$("#sectionwrapper").mouseleave(function() {
  tl.play();
});

body {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%
}

#scrollable section:nth-child(2n) {
  background-color: #eee;
}

#scrollable {
  white-space: nowrap;
  width: 600px;
  height: 400px;
  border: 1px solid gray;
  overflow: hidden
}

#sectionwrapper {
  width: 3600px;
  display: table
}

#sectionwrapper section {
  width: 600px;
  height: 400px;
  display: inline-block;
  vertical-align: top;
}

#sectionwrapper section div {
  padding: 50px;
  overflow: hidden;
  white-space: normal;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>

<script src="https://labs.ft.com/ftscroller/lib/ftscroller.js"></script>

<div id='scrollable'>
  <div id='sectionwrapper'>
    <section>
      <div>Page 1
        <p>Swipe left to scroll the next page into view. If you swipe quickly...</p>
      </div>
    </section>
    <section>
      <div>Page 2
        <p>...lots...</p>
      </div>
    </section>
    <section>
      <div>Page 3
        <p>...and lots...</p>
      </div>
    </section>
    <section>
      <div>Page 4
        <p>...of pages...</p>
      </div>
    </section>
    <section>
      <div>Page 5
        <p>...in one single...</p>
      </div>
    </section>
    <section>
      <div>Page 6
        <p>...scroll movement. FTScroller will snap to the nearest page when the scroll animation comes to rest.</p>
      </div>
    </section>
  </div>
</div>

还有一个我在这里尝试过的代码笔：https://codepen.io/sains23/pen/KLXXOR