GSAP горизонтальная анимация

// Инициализация GSAP и ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

var sections = gsap.utils.toArray(".card-project");

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: "#js--developing-scroll",
    pin: "#js--developing-pin",
    pinSpacing: true,
    scrub: 1,
    start: "top top",
    end: "+=2000 bottom",
    markers: true,
    invalidateOnRefresh: true,
  }
});

body {
  margin: 0;
  padding: 0;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

.wrap {
  padding: 0 1rem;
}

p.mb-5 {
  margin-bottom: 100px;
}

.a-developing-project {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  column-gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.card-project {
  flex: 0 0 330px;
  background-color: lightgreen;
  padding: 20px;
  border-radius: 10px;
}

.a-height {
  height: 3000px;
  background-color: lightgrey;
  margin-top: 50px;
}

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js'></script>
<div class="wrap">
  <p class="mb-5">Далеко-далеко за, словесными горами в стране гласных и согласных живут рыбные тексты. Повстречался заглавных буквоград, возвращайся текст коварный рыбными но алфавит переулка дорогу себя меня семантика даль взобравшись, рекламных по всей взгляд она,
    агентство толку предложения! Снова путь по всей назад которое то рыбного текстов? Заголовок они однажды выйти мир дороге там ведущими! Родного страна живет грамматики обеспечивает которое, составитель они речью приставка текста переулка прямо коварный,
    рот залетают языкового напоивший ведущими текстами осталось заманивший всемогущая коварных букв агентство. Моей рекламных путь коварный переписывается снова, парадигматическая текст заглавных одна, пустился ручеек страна.</p>
  <div id="js--developing-pin">
    <div class="developing-project__title-box" data-aos="fade-up">
      <h2 class="h1">Как разрабатываем <span class="d-block">проект</span></h2>
    </div>
    <ol id="js--developing-scroll" class="a-developing-project">
      <li class="card-project">
        <h3>1 Концепция</h3>
        <p>Принимаем задачу, <br> разрабатываем несколько <br> решений</p>
      </li>
      <li class="card-project">
        <h3>2 Согласование</h3>
        <p>Утверждаем подходящее <br> решение и его бюджет, заключаем <br>договор, назначаем <br> для вас персонального менеджера <br> проекта</p>
      </li>
      <li class="card-project">
        <h3>3 Создание <br> образцов</h3>
        <p>Готовим тестовые экземпляры, <br> вносим коррективы, утверждаем <br> в тираж</p>
      </li>
      <li class="card-project">
        <h3>4 Производство <br> тиража</h3>
        <p>Печатаем, проверяем <br> качество, пакуем</p>
      </li>
      <li class="card-project">
        <h3>5 Доставка</h3>
        <p>Отправляем по всей <br> России, а в пределах <br> МКАД — привозим бесплатно</p>
      </li>
      <li class="card-project">
        <h3>6 Доставка</h3>
        <p>Отправляем по всей <br> России, а в пределах <br> МКАД — привозим бесплатно</p>
      </li>
      <li class="card-project">
        <h3>7 Доставка</h3>
        <p>Отправляем по всей <br> России, а в пределах <br> МКАД — привозим бесплатно</p>
      </li>
      <li class="card-project">
        <h3>8 Доставка</h3>
        <p>Отправляем по всей <br> России, а в пределах <br> МКАД — привозим бесплатно</p>
      </li>
    </ol>
  </div>
  <div class="a-height"></div>
</div>