Got my animation to trigger play on hover. I got everything to work but when I try to hover to play again, nothing seems to work.

Any ideas what I wrote wrong?

var squares = document.getElementById("test");
var animation = bodymovin.loadAnimation({
    container: test,
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: ".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;
    }
}

Got my animation to trigger play on hover. I got everything to work but when I try to hover to play again, nothing seems to work.

Any ideas what I wrote wrong?

var squares = document.getElementById("test");
var animation = bodymovin.loadAnimation({
    container: test,
    renderer: "svg",
    loop: false,
    autoplay: false,
    path: "https://dl.dropboxusercontent./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;
    }
}

• javascript
• jquery
• animation
• bodymovin

Share Improve this question Follow edited Nov 2, 2017 at 14:16 Roman 5,25033 gold badges2424 silver badges3333 bronze badges asked Aug 3, 2017 at 17:24 phantomboogiephantomboogie 11311 silver badge77 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7 +25

When the animation reaches it's final frame, it doesn't go back to the first one. That's why if you call play, nothing happens since it has already ended and there is no more to play.
You should do:

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

And if you only want it to replay once it has reached it's final frame, this should work:

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

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

I'm giving a shot on this, although my experience about Bodymovin (and Lottie) is only from React Native world.

This should be quite straight forward to stop animation and restart it when cursor leaves the element:

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

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