Инструкция
- Добавляете новый элемент в зеро-блоке Vector
- Далее создаём новый векторный элемент, либо экспортируем уже отрисованный (клик правой кнопкой мыши Import SVG here
- Сохраняем
- Добавляем класс векторному элементу, для этого жмём правой кнопкой мыши Add CSS Class Name
- Копируем код ниже и вставляем его в блок T123
- Ориентируясь по комментариям в коде вы можете настроить длительность и плавность анимации, также задержку перед проигрыванием каждого пути.
- По необходимости можно задать размеры, форму скругления, толщину и цвет штрихов в стилях анимации
<!--https://dsgnmax.ru/animation-path-svg-->
<script src="https://unpkg.com/animejs@3.1.0/lib/anime.min.js"></script>
<script>
var visibilitychangeLogEl = document.querySelector('.vector');
anime({
targets: '.vector path', //вместо .vector указать свой класс svg-элемента
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine', //Плавность анимации
duration: 3000, //Длительность анимации
delay: function(el, i) { return i * 300 }, //Задержка перед проигрыванием каждого элемента в svg-файле
direction: 'alternate',
loop: true, // true - анимация зацикливается, false - нет, число - количество повторений
});
</script>
<style>
.vector path{
/*stroke-dasharray: 20; Длинна штриха*/
stroke-linecap: round; /*Скругленные углы у штрихов butt, round, square*/
/*stroke-linejoin: miter; /*Как будут выглядеть углы обводки bevel, miter, round*/
/*stroke-miterlimit: 8; /*Соприкосновение двух линий под острым углом. работает только с stroke-linejoin - miter */
/*stroke: green; /*Цвет обводки*/
/* stroke-width: 6; /*Толщина обводки*/
}
</style>
