Анимация элементов при горизонтальном скролле

Question

Есть 9 кругов, которые горизонтально скролятся, слева-направо. Необходимо, что бы каждый круг при приближении к правой части экрана увеличивался в размере на 150%(см. скриyшот№2), также при скролле должна быть анимация вращения каждого круга по часовой стрелке. Подскажите пожалуйста как это можно реализовать с помощью JS/CSS.

.wrapper {
  display: flex;
  overflow-x: auto;
  gap: 10px;
  transform: rotateY(-180deg);
}

.wrapper .item {
  min-width: 350px;
  min-height: 350px;
  border-radius: 50%;
  text-align: center;
  border: 1px dashed black;
  transform: rotateY(180deg);
}

<div class="section1">
      <h1>Companies we keep</h1>
      <div class="wrapper">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
      </div>
 </div>

БЛОГ НА HUSL

Анимация элементов при горизонтальном скролле

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