Как запускать анимацию нескольких элементов со случайными задержками?

Question

[SuperToster]

С использованием TweenMax + MorphSVGPlugin сделана плавно меняющаяся линия из нескольких путей.

https://jsfiddle.net/8zb6yc5L/

Анимация всех SVG стартует одновременно. А надо - запускать их со случайной задержкой. Как это сделать?

Answer 1

[0xD34F]

Анимируйте элементы независимо, вместо общего селектора передавайте в to конкретный элемент. Например:

const
  ease = Power0.easeNone,
  yoyo = true;

document.querySelectorAll('svg').forEach((n, i) => {
  const
    TopWave = new TimelineLite(),
    el = n.querySelector('.wave'),
    delay = i * (1 + Math.random() * 2);

  TopWave
    .to(el, 8, { delay, morphSVG: '.wave-one',   yoyo, ease })
    .to(el, 7, { delay, morphSVG: '.wave-two',   yoyo, ease })
    .to(el, 8, { delay, morphSVG: '.wave-three', yoyo, ease,
      onComplete: () => TopWave.restart()
    });
});