SuperToster
@SuperToster

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

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

https://jsfiddle.net/8zb6yc5L/

Анимация всех SVG стартует одновременно. А надо - запускать их со случайной задержкой. Как это сделать?
  • Вопрос задан
  • 71 просмотр
Решения вопроса 1
0xD34F
@0xD34F Куратор тега JavaScript
Анимируйте элементы независимо, вместо общего селектора передавайте в 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()
    });
});
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы