Как добавить эту анимацию с помощью CSS, где текст меняет цвет слева направо при прокрутке экрана ⇐ CSS

[Anonymous]

Когда я прокручиваю текст внутри контейнера, его цвет должен измениться с серого на белый и слева направо, когда я прокручиваю вниз, цвет должен начать меняться, а когда я поднимаюсь вверх, он отменяет его.
Я видел другие похожие ответы о переполнении стека, но заметил, что ответ, который они получили, включает JQuery, о котором я понятия не имею. Мне просто нужно это в CSS.
Использование React
Вот HTML-код:

Код: Выделить всё

We’re on the journey to become one of the

most influential agencies in the world one

that truly cares about the people in it.

Вот CSS:

Код: Выделить всё

.container {
width: 90%;
max-width: 1920px;
height: auto;
background-color: #000000;
border: 2px solid #010101;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
text-align: center;
margin: 20px auto;
margin-top: 20px;
}

.text {
font-family: 'Inria Sans', sans-serif;
font-size: 48px;
line-height: 1.5;
color: grey;
position: relative;
overflow: hidden;
}

.text::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: white;
clip-path: inset(0 100% 0 0);
animation: text-reveal 3s linear forwards;
}

@keyframes text-reveal {
0% {
clip-path: inset(0 100% 0 0);
}
100% {
clip-path: inset(0 0 0 0);
}
}

.highlight {
color: red;
}

Посмотрите на это изображение ниже для справки.
Чего я хочу
Чего я достиг на данный момент

Подробнее здесь: https://stackoverflow.com/questions/791 ... rom-left-t