Anime.js - объединение временной шкалы и анимации события

Question

Я хотел бы запустить анимацию по клику после запуска временной шкалы. Но я не могу заставить его работать. Временная шкала работает нормально, но анимация по клику - нет. Любая идея о том, как заставить это работать должным образом?

HTML:

<section id="step-1">
  <h1 class="ml3">Title</h1
  <a href="#" class="next-step">Next Step</a>
</section>

JS:

$( document ).ready(function() {

  // Wrap every letter in a span
  $('.ml3').each(function(){
    $(this).html($(this).text().replace(/([^\x00-\x80]|\w)/g, "<span class='letter'>$&</span>"));
  });

  var timelineStep1 = anime.timeline({loop: false});

  timelineStep1
    .add({
      targets: '.ml3 .letter',
      opacity: [0,1],
      easing: "easeInOutQuad",
      duration: 2250,
      delay: function(el, i) {
        return 100 * (i+1)
      }
    })
    .add({
      targets: '.next-step',
      opacity: [0,1],
      easing: "easeInOutQuad",
      duration: 2250,
      /*delay: function(el, i) {
        return 150 * (i+1)
      }*/
    });

  var nextStep = anime({
    targets: '#step-1',
    opacity: 0,
    duration: 2250,
    easing: "easeInOutQuad",
    autoplay: false
  });

  $('#step-1 .next-step').click(function(e){
    e.preventDefault();
    nextStep.play;
  });

});

Answer 1

У вас есть опечатка в вашем классе вашего <a> тег

<section id="step-1">
  <h1 class="ml3">Title</h1
  <a href="#" class="next-step">Next Step</a>
</section>

Это должно работать!