код
анимация появления SVG в zero‑блоке
смотрите подробную инструкцию и код ниже
<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>
Инструкция
  1. Добавляете новый элемент в зеро-блоке Vector
  2. Далее создаём новый векторный элемент, либо экспортируем уже отрисованный
  3. Сохраняем
  4. Добавляем класс векторному элементу, для этого жмём правой кнопкой мыши Add CSS Class Name
  5. Копируем код ниже и вставляем его в блок T123
  6. Ориентируясь по комментариям в коде вы можете настроить длительность и плавность анимации, также задержку перед проигрыванием каждого пути
  7. По необходимости можно задать размеры, форму скругления, толщину и цвет штрихов в стилях анимации
Если нужно, чтобы анимация начала проигрываться только тогда, когда она в зоне видимости
<script src="https://unpkg.com/animejs@3.1.0/lib/anime.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
var observer = new IntersectionObserver(function(entries) {
// для каждой записи-цели проверяем, пересекается ли элемент с зоной видимости
entries.forEach(entry => {
if (entry.isIntersecting) { // если элемент появляется в зоне видимости
anime({
targets: '.vector path', // тут указываем ваш класс элемента
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine', //Плавность анимации
duration: 3000, //Длительность анимации
delay: function(el, i) { return i * 300 },
direction: 'alternate',
loop: true, // true - анимация зацикливается, false - нет, число - количество повторений
});

// Опционально отменяем наблюдение если анимация должна проиграть только один раз
observer.unobserve(entry.target);
}
});
}, {
threshold: 0.1 // Задаем порог срабатывания 10%
});

// Начинаем наблюдение за элементом .vector
var elementToObserve = document.querySelector('.vector');
if(elementToObserve) observer.observe(elementToObserve);
});
</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>
СКОПИРОВАТЬ
СКОПИРОВАТЬ
Made on
Tilda