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

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

При вивченні даного екрану, клієнт наводить на етапи курсором (в наслідок чого кнопка з номером етапу спалахує), а при кліку відбувається подальша прогрузка синього повзунка до наступного етапу. Далі за принципом подібності до останнього етапу.

Якщо з цим екраном не буде взаємодій, етапи прогрузяться при скроллі з п'ятого на шостий. Синій позунок закінчить свій рух на останньому етапі.

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