анимация появления 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>
- Добавляете новый элемент в зеро-блоке Vector
- Далее создаём новый векторный элемент, либо экспортируем уже отрисованный
- Сохраняем
- Добавляем класс векторному элементу, для этого жмём правой кнопкой мыши Add CSS Class Name
- Копируем код ниже и вставляем его в блок T123
- Ориентируясь по комментариям в коде вы можете настроить длительность и плавность анимации, также задержку перед проигрыванием каждого пути
- По необходимости можно задать размеры, форму скругления, толщину и цвет штрихов в стилях анимации
Если нужно, чтобы анимация начала проигрываться только тогда, когда она в зоне видимости
<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>
