Перемещение Письма Тобиаса Ахлина, использованного на нескольких Заголовках - PullRequest
Новая
       6

Перемещение Письма Тобиаса Ахлина, использованного на нескольких Заголовках

0 голосов
/ 21 января 2020

Я использую этот замечательный javascript инструмент анимации Тобиаса Ахлина https://tobiasahlin.com/moving-letters/#11, он основан на аниме. js. И я хотел бы использовать эту анимацию на нескольких тегах h2. Это код, который мне нужно использовать несколько раз: 

// Wrap every letter in a span
var textWrapper = document.querySelector('.ml11 .letters');
textWrapper.innerHTML = textWrapper.textContent.replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.ml11 .line',
    scaleY: [0,1],
    opacity: [0.5,1],
    easing: "easeOutExpo",
    duration: 700
  })
  .add({
    targets: '.ml11 .line',
    translateX: [0, document.querySelector('.ml11 .letters').getBoundingClientRect().width + 10],
    easing: "easeOutExpo",
    duration: 700,
    delay: 100
  }).add({
    targets: '.ml11 .letter',
    opacity: [0,1],
    easing: "easeOutExpo",
    duration: 600,
    offset: '-=775',
    delay: (el, i) => 34 * (i+1)
  }).add({
    targets: '.ml11',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });

Есть предложения? Большое спасибо

...