Как обновить временную шкалу anime.js после взаимодействия FTScroller в горизонтально прокручиваемой секции - PullRequest
Новая
       30

Как обновить временную шкалу anime.js после взаимодействия FTScroller в горизонтально прокручиваемой секции

0 голосов
/ 21 мая 2019

Я пытаюсь сделать так, чтобы раздел на моем сайте можно было прокручивать по горизонтали, с помощью сенсорного или мышиного взаимодействия, а также возможности автоматической прокрутки с помощью 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

...