How can I use javascript to make it so the user can only trigger the hover event once the Lottie animation has played in full?

Question

How can I make it so the user is only able to trigger the mouse hover & mouse left events, once the Lottie animation has initially played in full.

Currently the user is able to cause the hover event when the animation is mid-playing, something I don't want to be able to happen.

Thanks

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);
};

Maybe you need to have the loop false and add the mouse events when the animation completes. You can use the onComplete event to listen to animation complete. — Jp Mohan, Jan 27 '20 at 18:16

score 1 · Answer 1 · answered Jan 27 '20 at 20:04

    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);
};

Thanks for your help, but this doesn't seem to work. Nothing happens on hover. What do you think it could be? — Toby Mardles, Jan 27 '20 at 20:28

score 0 · Accepted Answer · answered Jan 28 '20 at 00:31

Figure it out in case anyone is interested. This might not be the most efficient way, but worked for me!

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);
  }

How can I use javascript to make it so the user can only trigger the hover event once the Lottie animation has played in full?

2 Answers2