Как сделать такую svg анимацию?

Question

[Lvan226]

https://adv.ru/#CoreVerticals Есть сайт на нем в блоке отрасли при клике на элемент списка происходит анимация картинки. Как такое можно реализовать? Есть ли какие-то требования к svg при подобной анимации? Еще интересует как реализуется скролл на этом сайте.

Answer 1

[lagudal]

ключевые слова "stroke-dasharray, stoke-dashoffset" - смотрите реализацию в гугле примеров тьма.
Требования к svg - fill none, stroke-width по вашему вкусу.
И у них не по клику а по ховеру элементу с классами core__card js-core-card добавляется класс core__card_active
и вот к нему эта анимация и применяется.
Например, первый элемент, div data-id="insurance" class="core__card js-core-card
внутри него svg id="insuranceSvg", stroke-dashoffset=32.
Как только к диву добавился класс core__card_active, значение stroke-dashoffset анимируется до 0. Убирается активный класс, значение stroke-dashoffset снова в дефолтное. Ну там еще опасити для активного класса, но это уже не svg- там просто все.