Horizontal ScrollTrigger animations

Question

I'm looking to replicate the following effect:

- When you arrive at the section, the scroll switches to horizontal mode (that's done).
- And most importantly, when each card passes the horizontal center of the section, it is given the class ".active".

Overall, I'd like to know how to add triggers in a horizontal mode.

Thank you in advance for your help, and I'm here to provide more details if needed. I've added the link to the short demo in the first comment.

<section class="solutions">
    <div class="horizontal-scroll">
        <div class="card-solution">
            <div class="index">1</div>
            <p class="content">Suis nos séances tout niveau cardio, renfo, et...</p>
            <div class="img-container">
                <img src="http://fff.local/wp-content/uploads/2023/10/burger.jpg" alt="">
            </div>
        </div>
        <div class="card-solution">
            <div class="index">2</div>
            <p class="content">Régale toi avec nos meilleures recettes healthy</p>
            <div class="img-container">
                <img src="http://fff.local/wp-content/uploads/2023/10/burger.jpg" alt="">
            </div>
        </div>
        <div class="card-solution">
            <div class="index">3</div>
            <p class="content">Perds entre 5 et 15kg en 8 semaines </p>
            <div class="img-container">
                <img src="http://fff.local/wp-content/uploads/2023/10/burger.jpg" alt="">
            </div>
        </div>
        <div class="card-solution">
            <div class="index">4</div>
            <p class="content">Suis tes résultats et ton évolution</p>
            <div class="img-container">
                <img src="http://fff.local/wp-content/uploads/2023/10/burger.jpg" alt="">
            </div>
        </div>
        <div class="card-solution">
            <div class="index">5</div>
            <p class="content">Reste motivé toute l’année grâce à nos programmes LIVE</p>
            <div class="img-container">
                <img src="http://fff.local/wp-content/uploads/2023/10/burger.jpg" alt="">
            </div>
        </div>
        <div class="card-solution">
            <div class="index">6</div>
            <p class="content">L’abonnement est tout compris, sans supplément</p>
            <div class="img-container">
                <img src="http://fff.local/wp-content/uploads/2023/10/burger.jpg" alt="">
            </div>
        </div>
    </div>
</section>

.solutions {
    //border: solid 5px red;
    width: 100%;

    .horizontal-scroll {
      //border: solid 1px blue;
      display: flex;
      gap: 1.5rem;
      transform: translateX(15%);

      position: relative;
      width: fit-content;

      .card-solution {
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 3.5rem 1.5rem;
        border-radius: 15px;
        min-width: 520px;

        .index {
          color: #DDD;
          font-size: 5rem;
          font-weight: 600;
        }

        .content {
          color: #000;
          font-size: 2rem;
          font-weight: 600;
          text-align: center;
          padding-bottom: 2rem;
        }

        .img-container {
          position: relative;
          width: 11rem;
          height: 11rem;
          border-radius: 50%;
          overflow: hidden;

          img {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        &.active {
          background-color: red;
        }
      }
    }

  }

const solutionsSection = document.querySelector('.solutions');
const solutions = document.querySelector('.horizontal-scroll');
let solutionsWidth = solutions.offsetWidth;
let amountToScroll = (solutionsWidth - window.innerWidth) + 1000;
const cardsSolutions = document.querySelectorAll('.card-solution');

const animation = gsap.to(solutions, {
    x: -amountToScroll,
    duration: 3,
    ease: "none",
});

ScrollTrigger.create({
    trigger: solutionsSection,
    start: "+=75 20%",
    end: "+=" + amountToScroll,
    animation: animation,
    scrub: 1,
    pin: true,
});