CODEWITHSUNDEEP
javascripthtmlcssanimationgif
Fluffyninja
Fluffyninja

Reputation: 23

html - play gif once on hover and play reversed on mouseout

I want to have a GIF that plays once when you mouse over it and pauses on the last frame, and then when you move the mouse off the image it should play backwards and pause on the first frame.

I have a static image for the first and last frame, as well as separate animated GIFs playing the animation forwards and backwards, I just have no clue how I would go about programming this.

Optimally I would just use CSS but from what I know it doesn't seem possible without js/jquery, however if anyone has any ideas it would be greatly appreciated.

Upvotes: 2

Views: 5645

Answers (1)

rphv
rphv

Reputation: 5537

I think this would be hard with pure CSS, since once you load an animated gif, it loops infinitely regardless of whether or not it's visible. Thus you'd have to synchronize the start of the gif with the mouseover / mouseout events.

Here's a jQuery implementation that changes the src attribute on mouseover and mouseout events. A spin lock handles the case when you mouseout or mouseover during the animation - it waits until the animation is done, then plays the reverse, unless the mouse is hovered over the element when the forward animation ends.

var firstFrame = "http://imgur.com/UeMOrix.gif";
var lastFrame = "http://imgur.com/vy7weQ1.gif";
var forwardAnimation = "http://i.imgur.com/UB0g8dT.gif";
var backwardAnimation = "http://i.imgur.com/aIxrX26.gif";

var animationLength = 5040;
var playing = false;
var checkingIfPlaying = false;

function playForward() {
  if ($("#animation").is(":hover")){
    playing = true;
    $("#animation").attr("src", forwardAnimation);
    window.setTimeout(function () {
      $("#animation").attr("src", lastFrame);
      playing = false;
    }, animationLength);
  }
  else {
    $("#animation").attr("src", firstFrame);
  }
}

function playBackward() {
  if ($("#animation").is(":hover")) {
    $("#animation").attr("src", lastFrame);
  }
  else {
    playing = true;
    $("#animation").attr("src", backwardAnimation);
    window.setTimeout(function () {
      $("#animation").attr("src", firstFrame);
      playing = false;
    }, animationLength);
  }
}

$("#animation").mouseover(function (e) {
    if (!checkingIfPlaying) {
      checkingIfPlaying = window.setInterval(function () {
        if (!playing) {
          window.clearInterval(checkingIfPlaying);
          playForward()
          checkingIfPlaying = false;
        }
      }, 0);
    }
});

$("#animation").mouseout(function (e) {
    if (!checkingIfPlaying) {
      checkingIfPlaying = window.setInterval(function () {
        if (!playing) {
          window.clearInterval(checkingIfPlaying);
          playBackward()
          checkingIfPlaying = false;
        }
      }, 0);
    }
});
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>so</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

</head>

<body>

<!-- preload images to prevent flickering -->
<div style="display: none;">
    <img src="http://i.imgur.com/UB0g8dT.gif">
    <img src="http://i.imgur.com/aIxrX26.gif">
    <img src="http://imgur.com/vy7weQ1.gif">
</div>

<img id="animation" src="http://imgur.com/UeMOrix.gif">

</body>
</html>

Upvotes: 3

Related Questions