Как я могу использовать javascript, чтобы пользователь мог вызвать событие наведения мыши только после полного воспроизведения анимации Lott ie?

Question

Как сделать так, чтобы пользователь мог запускать события наведения мыши и левой кнопки мыши только после того, как анимация Lott ie изначально воспроизводилась полностью.

В настоящее время пользователь может вызвать событие зависания, когда анимация играет в середине, что-то, чего я не хочу, чтобы это произошло.

Спасибо

var anim4;
    var anim5 = document.getElementById('lottie5')
    var animation5 = {
        container: anim5,
        renderer: 'svg',
        loop: true,
        autoplay: false,   /*MAKE SURE THIS IS FALSE*/
        rendererSettings: {
        progressiveLoad: false},
        path: 'https://assets1.lottiefiles.com/packages/lf20_H2PpYV.json',
        name: 'myAnimation',
    };
    anim4 = lottie.loadAnimation(animation5);


    // SCROLLING DOWN
    var waypoint5 = new Waypoint({
     element: document.getElementById('lottie5'),
     handler: function(direction) {
       if (direction === 'down') {
         anim4.playSegments([[130,447],[358,447]], true);
         this.destroy()
       }
     },
       offset: '50%'
    })

    anim5.addEventListener("mouseenter", myScript1);
    anim5.addEventListener("mouseleave", myScript2);

function myScript1(){
    anim4.goToAndStop(500, true);
}

function myScript2(){
    anim4.playSegments([358,447],true);
}; 

Answer 1

    var anim4;
    var anim5 = document.getElementById('lottie5')
    var animation5 = {
        container: anim5,
        renderer: 'svg',
        loop: false,
        autoplay: true,   /*MAKE SURE THIS IS FALSE*/
        rendererSettings: {
        progressiveLoad: false},
        path: 'https://assets1.lottiefiles.com/packages/lf20_H2PpYV.json',
        name: 'myAnimation',
    };
    anim4 = lottie.loadAnimation(animation5);


    // SCROLLING DOWN
    var waypoint5 = new Waypoint({
     element: document.getElementById('lottie5'),
     handler: function(direction) {
       if (direction === 'down') {
         anim4.playSegments([[130,447],[358,447]], true);
         this.destroy()
       }
     },
       offset: '50%'
    })

    anim4.addEventListener("complete", function(){
        console.log('Animation completed!!');
        anim5.addEventListener("mouseenter", myScript1);
        anim5.addEventListener("mouseleave", myScript2);
    });

function myScript1(){
    anim4.goToAndStop(500, true);
}

function myScript2(){
    anim4.playSegments([358,447],true);
}; 

Answer 2

Поймите, если кому-то интересно. Возможно, это не самый эффективный способ, но он сработал для меня!

anim4.addEventListener('complete', function(e) { 
    console.log('Animation completed'); 
});

anim4.addEventListener('complete', function(e) {

  var elem = document.getElementById('lottie5');

  elem.addEventListener('mouseover', mouseElem)
  elem.addEventListener('mouseleave', mouseElem2)

  function mouseElem() {
    anim4.goToAndStop(150, true);
  }

  function mouseElem2() {
    anim4.goToAndStop(30, true);
  }