sinneren

<div>
<div class="element1">
<div class="element2">
</div>

это .element1 + .element2

<div>
<div class="element1">
<div></div>
<div></div>
<div></div>
<div class="element2">
</div>

это .element1 ~ .element2

Вадим, я додумываю за тс, но мне кажется он хочет не запустить анимацию, а при каждом скролле(повороте колеса мыши), чтобы прибавлялось значение в графике,а это уже другая история, хотя и не исключает приведенного примера, т.к. начинать тоже нужно в определенный момент.

для тс Вячеслав Дроздов же скажу, выше приводили интерсекшн - с ним понять когда попал в зону видимости ок, можно еще и считать scrollTop и offsetTop у элемента, исходя из этих же данных вычислять начало\конец блока, что и будет отправной и конечной точкой для добавления % ширины\высоты графиков. Предполагаю так же, что считать надо только при увеличении значений скролла. Но всё это индивидуально, готового решения не выкатишь тут прям.

Вдохновиться можно индикатором https://codepen.io/MadeByMike/pen/ZOrEmr
Как меняется шапка https://codepen.io/osublake/pen/NdEONL
Если всё таки просто запускать анимацию при опр положении скролла https://codepen.io/michalsnik/pen/WxNdvq (https://css-tricks.com/aos-css-driven-scroll-anima...)

и вот тут есть пример с полоской https://alexcambose.ro/motus/#/README

счётчики имеют те же начало-конец, что можно интерпретировать как 0-100%, с округлением. либо задать массив конкретных значений который каждые Н процентов будет брать Н-ый элемент массива. Например, массив из [5, 16, 36, 89] (положим это крайние занчения, или у них там 0 и 100 крайние, то их можно захардкодить в конце. И при скролле в шаг 25% от всего отображать каждые 25% н+1 элемент массива

подчёркивает, потому что inline-block и float не должны идти вместе

inline-block is ignored due to the float. If 'float' has a value other than 'none', the box is floated and 'display' is treated as 'block'scss(propertyIgnoredDueToDisplay)

и что это значит? ну 320 пусть

window.getComputedStyle(element, null)

Например, так. https://jsfiddle.net/dvpLrfc8/5/

https://www.sarasoueidan.com/blog/animating-css-shapes/

В итоге пришёл к тому, что убрал флекс у сетки в этом месте, для row d-block, колонки раскидал через float-left\right