Анимация SVG изображения

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

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

Если с этим экраном не будет взаимодействий, этапы прогружаются при скрилле с пятого на шестой. Синий позунок завершает свое движение на последнем этапе.

видео готовой анимации - https://drive.google.com/file/d/1D4Ufv-oBJxut9LpC1thFY40JFlCIz2Vi/view