Как запустить 2 анимации svg на странице (В примере запускается только одна)?

Question

[Coreproseo]

При добавлении нескольких svg анимаций срабатывает только одна из них.
Как реализовать чтобы работало 2 и более анимации?

Пример:
https://codepen.io/ijnqqoim-the-animator/pen/qBoXzVj

Answer 1

[ligvake]

Присваивать разным элементам одинаковый id – плохая практика, он и расшифровывается как уникальный признак, идентификатор. Лучше использовать для этого классы.
Но вот рабочий вариант с использованием id:

window.onload=function(){
     let paths = document.querySelectorAll('[id=p]');
      paths.forEach(function(path) {
        const length = path.getTotalLength();
        path.style.strokeDasharray = length;
        path.style.strokeDashoffset = length;
      });
   }

Comments

[Coreproseo]

Спасибо, все получилось.

[Coreproseo]

Может еще подскажете 2 вопроса ?
1. Начать запуск анимации при прокрутке страницы до анимации.
2. Задержка повтора анимации. Чтобы прорисованная svg задерживалась на пару секунд, а не сразу начинало прорисовывать заново.

[ligvake]

Coreproseo,
Примерно вот так:
Добавляешь листенер скролла
Проверяешь, полностью ли показаны svg

if(position.top >= 0 && position.bottom <= window.innerHeight)

Делаешь задержку через SetTimeout на две секунды

Вот такое в итоге получается:

window.addEventListener('scroll', function() {
  let paths = document.querySelectorAll('[id=p]');
  paths.forEach(function(path) {
    var position = path.getBoundingClientRect();
    if(position.top >= 0 && position.bottom <= window.innerHeight) {
		  setTimeout(function(){
        const length = path.getTotalLength();
        path.style.strokeDasharray = length;
        path.style.strokeDashoffset = length;
      }, 2000);
	  }
  });
});

P.S. сработает только если элемент изначально не виден и нужно до него проскролить

Можно сделать проверку, виден ли он изначально:

Вот итоговый скриптик

window.onload=function(){
  checkAnimationVisible();
}

window.addEventListener('scroll', function() {
  checkAnimationVisible();
});

function checkAnimationVisible() {
  let paths = document.querySelectorAll('[id=p]');
  paths.forEach(function(path) {
    var position = path.getBoundingClientRect();
    if(position.top >= 0 && position.bottom <= window.innerHeight) {
      setTimeout(function(){
        const length = path.getTotalLength();
        path.style.strokeDasharray = length;
        path.style.strokeDashoffset = length;
      }, 2000);
    }
  });
}

[Coreproseo]

ligvake, Спасибо )

[Coreproseo]

ligvake, Подскажете еще момент с svg анимацией.
Вот сайт https://test.testsites.site где я это делаю,
Нужно так, чтобы анимация загружалась полностью, задерживалась на пару секунд, а потом по новой грузилась.

В вашем примере она перед загрузкой задерживается один раз и все.

[Coreproseo]

ligvake, Благодарю, очень исчерпывающие ответы.
Очень помогли с данным вопросом.

[Coreproseo]

Coreproseo, Есть еще маленький нюанс на сайте с анимацией
При загрузке страницы анимация не срабатывает, а начинает срабатывать после повторной перезагрузки страницы

Answer 2

[robprane]

getElementById отдает всего один элемент, поскольку двух элементов с одним идентификатором быть не должно.