Обратное воспроизведение анимации JS при отпускании мышью.

Question

У меня есть код, который прекрасно работает. Мне не нравится то, что при отпускании мышки анимация останавливается. Это не хорошо. У меня есть пара идей:

1. Как сделать эту "остановку" более гладкой и удобной?

2. Как сделать "обратный ход" после отпускания мышью? (Воспроизвести обратную анимацию от точки пробоя после отпускания мыши)

   animContainer = document.getElementById('bodymovin');
   
   var params = {
       container: animContainer,
       renderer: 'svg',
       loop: true,
       autoplay: true,
       autoplay:false,
       autoloadSegments: false,
       path: 'data.json'
   
   };
   
   var anim;
   
       anim = bodymovin.loadAnimation(params);
       animContainer.addEventListener("mouseenter", myScript1);
       animContainer.addEventListener("mouseleave", myScript2);
   
   function myScript1(){
   
       anim.play();
   }
   
   function myScript2(){
   
       anim.stop();
   }
   

Answer 1

Используя приведенный выше пример, этот код работает для меня, хотя я не могу не думать, что есть более чистый способ сделать это...(скоро поднимет работающую ручку)

example1 = document.getElementById('example1');

var params = {
    container: example1,
    renderer: 'svg',
    loop: false,
    autoplay:false,
    autoloadSegments: false,
    path: 'example1.json'
};

var anim;
    anim = bodymovin.loadAnimation(params);
    example1.addEventListener("mouseenter", myScript1);
    example1.addEventListener("mouseleave", myScript2);

function myScript1(){
    bodymovin.setDirection(1);
    anim.play();
}

function myScript2(){
    bodymovin.setDirection(-1);
    anim.play();
};

Answer 2

Решаемые. Просто вставьте этот код:

$('#bodymovin').hover(function(){

        bodymovin.setDirection(1);
        anim.play();

    }, function(){

        bodymovin.setDirection(-1);
        anim.play();
}); 

вместо:

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

function myScript1(){

anim.play();
}

function myScript2(){

anim.stop();
}