Бодимовин зависает, играя анимацию только один раз

Question

Получил мою анимацию, чтобы вызвать игру при наведении. У меня все работает, но когда я снова пытаюсь играть, ничего не получается.

Есть идеи, что я написал не так?

var squares = document.getElementById("test");
var animation = bodymovin.loadAnimation({
    container: test,
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "https://dl.dropboxusercontent.com/BodyMovin/squares.json"
});

squares.addEventListener("mouseenter", function () {
    animation.play();
});

function playAnim(anim, loop) {
    if(anim.isPaused) {
        anim.loop = loop;
        anim.goToAndPlay(0);
    }
}

function pauseAnim(anim) {
    if (!anim.isPaused) {
        anim.loop = false;
    }
}

Answer 1

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

squares.addEventListener("mouseenter", function () {
  animation.goToAndPlay(0);
});

И если вы хотите, чтобы он воспроизводился только по достижении своего последнего кадра, это должно сработать:

var isComplete = true;
svgContainer.addEventListener('mouseenter', function(){
  if(isComplete){
    squares.goToAndPlay(0);
    isComplete = false;
  }
})

squares.addEventListener('complete', function(){
  isComplete = true;
})

Answer 2

Я даю шанс на это, хотя мой опыт с Бодемовиным (и Лотти) только из React Native world.

Это должно быть довольно просто, чтобы остановить анимацию и перезапустить ее, когда курсор покинет элемент:

squares.addEventListener("mouseenter", function () {
  animation.play();
});

squares.addEventListener("mouseleave", function () {
  animation.gotoAndStop(0);
});