Reverse play animation JS when mouseleave.

Question

I have a code that works great. I thing I don't like is that when mouseleave an animation stops sharp. That is not good. I got a couple ideas:

1. How make that 'stop' smoother and user-friendly?

2. How make 'reverse play' after mouseleave? (play reverse animation from breakdown point after mouseleave)

    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

Using the above example, this code works for me, though I can't help thinking there's a cleaner way to accomplish this...(will put a working pen up soon)

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

Solved. Just put this code:

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

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

    }, function(){

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

instead of:

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

function myScript1(){

anim.play();
}

function myScript2(){

anim.stop();
}