Как реализовать подобную анимацию?

Question

[leraweb]

Подскажите как реализовать подобную анимацию? При скролле двигается линия, точнее она заполняет svg. В конце при нажатии появляются доп блоки.
Возможно есть какой-то плагин? Или же как на сайте с помощью svg?

Пробовала делать два слоя, но выходит коряво. Хотелось бы понять как это грамотно сделать.
https://praktikum.yandex.ru/data-analyst/


Буду рада любой помощи. Заранее благодарю!

Answer 1

[Ivan Bogachev]

Это реализуется с помощью свойств stroke-dasharray и stroke-dashoffset в SVG. Слушаем событие скролла - меняем значения. Подробнее в статье про пунктирные вау-эффекты. Вам нужна пятая демка - там как раз вот почти то же самое рисуется при скролле. На сайте Яндекс.Практикума эту линию поделили на небольшие части для удобства/оптимизации, но принцип тот же.