Anime.js - Combinaison d'une ligne de temps et d'une animation sur un événement

Question

Je voudrais lancer une animation au moment du clic, après l'exécution de la ligne de temps. Mais je n'arrive pas à le faire fonctionner. La timeline fonctionne bien, mais l'animation au clic ne fonctionne pas. Avez-vous une idée de la façon dont cela peut fonctionner correctement ?

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

Vous avez une faute de frappe dans le nom de la classe de votre <a> étiquette

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

Ça devrait marcher !