Не удается объединить несколько анимаций прокрутки в одну в React Carousel

Question

Я пытаюсь воспроизвести эту карусель (https://lassepedersen.biz/?fbclid=IwAR3jvq98T8pGo0ra0sW3fpn0a2Rqa7aADf6eHWPnNR3JoZU5tq6Nx34WxVc)in компонента React, но не удается получить единую плавную анимацию.

Вы можете найти мою реализацию в https://codepen.io/anon/pen/QRVmQo?editors=0110. Для каждой прокрутки мыши я буду вызывать рекурсивную функцию анимации, которая берет свои аргументы (длительность, расстояние и т. Д.) Из «глобального» состояния и увеличивает это состояние. Когда анимация заканчивается, я сбрасываю состояние до 0.

    // global state
    this.scrollDebounce = null;
    this.animation = null;
    this.duration = 0;
    this.startTime = null;
    this.startPos = 0;
    this.scrollAmount = 0;

    scrollHandler = (e) => {

        const scrollIncrement = e.deltaY > 0 ? 50 : -50;
        const durationIncrement = 250;
        this.scrollAmount += scrollIncrement;
        this.duration += durationIncrement;
        console.log(this.scrollAmount);
        // console.log('unbounced');

        if (this.scrollDebounce) {
          cancelAnimationFrame(this.scrollDebounce);
        }

        this.scrollDebounce = requestAnimationFrame(() => {
          // console.log('debounced');
          this.startTime = Date.now();
          this.startPos = this.state.scrollPos;

          this.tick(this.scrollAmount);
          this.paraTick(this.scrollAmount);
        })
      }

      tick = (scrollAmount) => {

        const elapsed = Date.now() - this.startTime;
        console.log('elapsed ' + elapsed);

        this.setState((prevState) => ({ scrollPos: this.easeOutQuart(elapsed, this.startPos, this.scrollAmount, this.duration) }));

        if (elapsed < this.duration) {

          requestAnimationFrame(() => this.tick(scrollAmount));

        } else {

          this.scrollAmount = 0;
          this.duration = 0

        }
      }

    easeOutQuart = (elapsed, initialValue, amountOfChange, duration) => -amountOfChange * ((elapsed = elapsed / duration - 1) * elapsed * elapsed * elapsed - 1) + initialValue;

Вместо того, чтобы получать одну плавную анимацию на нескольких прокрутках, я получаю несколько анимаций с ускорениями и замедлением, что приводит к низкому кадру, подобному анимации. Также на нескольких прокрутках мыши я хотел бы получить аппаратное ускорение мыши, подобноеэффект, но не имею ни малейшего представления о том, как подойти к этому.

TL; DR: я пытаюсь получить анимацию с одной жидкостью на нескольких свитках вместо серии фрагментированных анимаций.