Горизонтальное смещение при скролле

const cont = document.querySelector(".js-parallax");

class parallax {
  
constructor(container) {
        this.target = container.querySelector('.js-clients-list');
        this.sections = this.target.offsetHeight;
        this.header = document.querySelector('.js-header');
        this.headerHeight = this.header.offsetHeight;
        this.init();
    }

    init() {
        document.addEventListener('scroll', this.initScroll.bind(this));
        document.addEventListener('load', this.move.bind(this));
    }

    initScroll() {
        const offsetTop = this.target.parentElement.offsetTop;
        const offsetHeight = this.target.parentElement.offsetHeight;
        if (window.scrollY > (offsetTop - this.headerHeight - 50)) {
            return;
        } else if ((window.scrollY + window.innerHeight) > (offsetTop + offsetHeight)) {
            this.move();
        } else {
            this.reset();
        }
    }

    move() {
        const offsetTop = this.target.parentElement.offsetTop - 50;
        const scrolled = (offsetTop - this.headerHeight) - window.scrollY;
        const pixels = window.innerHeight - this.headerHeight;
        const scrollWidth = this.target.scrollWidth - this.target.offsetWidth;
        const step = scrollWidth / pixels;
        const translate = (scrolled * step - scrollWidth);
        this.target.style.transform = `translateX(${translate}px)`;
    }

    reset() {
        this.target.style.transform = `translateX(0px)`;
    }
}

let Parallax = new parallax(document.querySelector(".js-parallax"))
.hero {
     height: 100vh;
     width: 100%;
     background: lightblue;
}
 .another_section {
     height: 2500px;
     width: 100%;
     background: lightblue;
}
 header {
     width: 100%;
     height: 70px;
     background: tomato;
     position: fixed;
     z-index: 10;
}
 .container {
     width: 100%;
     margin: 0 auto;
     padding-left: 2.5rem;
     padding-right: 2.5rem;
     max-width: 50rem;
}
 .section {
     height: 200px;
     background: lightgray;
     position: relative;
     overflow: hidden;
}
 .section__list {
     position: relative;
     padding: 0;
     margin: 0 auto;
     list-style: none;
     display: flex;
     justify-content: center;
     align-items: center;
     transform: translateX(0%);
     transition: all 0.1s ease;
}
 .section__item {
     height: 50px;
     width: 120px;
     background: #000;
     margin-left: 5%;
}
 .section__item:first-child {
     margin-left: 0;
}
 
<header class="js-header"></header>
<div class="hero"></div>
  <div class="container">
    <div class="section js-clients js-parallax">
      <ul class="section__list js-clients-list">
        <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
            <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
            <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
            <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
            <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
            <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
            <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
            <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
            <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
            <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
            <li class="section__item"><img src="https://www.citi.com/CRD/images/medium_retina/citi_logo.png" alt=""></li>
       
      </ul>
  </div>
</div>
<div class="another_section"></div>

Не могу сделать смещение при старте плавной, как только блок находится в области видимсоти он сразу начинает ездить, это хорошо. Но при самом начале если сместить скролл вниз и потом начать назад вести, то смещение прыгает. Сразу подставляется смещенное значение, пока не могу разобраться как это исправить, ведь надо что бы оно начинало смещать с 0. Помогите пожалуйста разобраться!

`https://codepen.io/eeerrvgfghyjhj/pen/ExWPMqw`

Ответы (0 шт):