Stop a gif animation onload on mouseover start the activation

Question

I have a page with a lot of GIFs      lt img src  gif 1303552574110 1 gif  alt     gt   lt img src  gif 1302919192204 gif  alt     gt   lt img src  gif 1303642234740 gif  alt     gt   lt img src  gif 1303822879528 gif  alt     gt   lt img src  gif 1303825584512 gif  alt     gt    What I m looking for  1 On page load    Animations for all gifs are stopped  2 On mouseover    Animations starts for that one gif  3 On mouseout    Animation stops again for that gif  I suppose this can be done in Jquery but I don t know how

User · Answer

This answer builds on that of Sourabh  who pointed out an HTML CSS JavaScript combo at https   codepen io hoanghals pen dZrWLZ that did the job  I tried this  and made a complete web page including the CSS and JavaScript  which I tried on my site  As CodePens have a habit of disappearing  I decided to show it here  I m also showing a simplified stripped-to-essentials version  to demonstrate the minimum that one needs to do  I must also note one thing  The code at the above link  whose JavaScript Sourabh copies  refers to a JavaScript constructor SuperGif     I don t think Sourabh explained that  and neither does the CodePen  An easy search showed that it s defined in buzzfeed   libgif-js   which can be downloaded from https   github com buzzfeed libgif-js readme   Look for the control that the red arrow below is pointing at  then click on the green  quot Code quot  button   N B  You won t see the red arrow  that s me showing you where to look    A menu will pop up offering various options including to download a zip file  Download it  and extract it into your HTML directory or a subdirectory thereof  Next  I m going to show the two pages that I made  The first is derived from the CodePen  The second is stripped to its essentials  and shows the minimum you need in order to use SuperGif  So here s the complete HTML  CSS  and JavaScript for the first page  In the head of the HTML is a link to libgif js   which is the file you need from the zip file  Then  the body of the HTML starts with some text about cat pictures  and follows it with a link to an animated cat GIF at https   media giphy com media Byana3FscAMGQ giphy gif   It then continues with some CSS  The CodePen uses SCSS  which for anyone who doesn t know  has to be preprocessed into CSS  I ve done that  so what s in the code below is genuine CSS  Finally  there s the JavaScript   lt html gt   lt head gt   lt script src  quot libgif-js-master libgif js quot  gt  lt  script gt    lt  head gt    lt body gt    lt div style  quot width  600px  margin  auto  text-align  center  font-family  arial quot  gt     lt p gt  And so  the unwritten law of the internet  that any  experiment involving video images must involve cats in  one way or another  reared its head again  When would  the internet s fascination with cats come to an end   Never  The answer is  quot Never quot    lt  p gt      lt img src  https   media giphy com media Byana3FscAMGQ giphy gif  class  gif    gt   lt  div gt    lt style gt  img gif     visibility  hidden      jsgif     position  relative      gifcontrol     position  absolute    top  0px    left  0px    width  100     height  100     cursor  pointer    transition  background 0 25s ease-in-out    z-index  100     gifcontrol after     transition  background 0 25s ease-in-out    position  absolute    content   quot  quot     display  block    left  calc 50  - 25px     top  calc 50  - 25px      gifcontrol loading     background  rgba 255  255  255  0 75      gifcontrol loading after     background   FF9900    width  50px    height  50px    border-radius  50px     gifcontrol playing        Only show the  stop  button on hover       gifcontrol playing after     opacity  0    transition  opacity 0 25s ease-in-out    border-left  20px solid  FF9900    border-right  20px solid  FF9900    width  50px    height  50px    box-sizing  border-box     gifcontrol playing hover after     opacity  1     gifcontrol paused     background  rgba 255  255  255  0 5      gifcontrol paused after     width  0    height  0    border-style  solid    border-width  25px 0 25px 50px    border-color  transparent transparent transparent  ff9900     lt  style gt    lt script gt  var gifElements   document querySelectorAll  img gif     for var e in gifElements           var element   gifElements e            if element nodeName     IMG                  var supergif   new SuperGif               gif  element              progressbar height  0              auto play  false                       var controlElement   document createElement  quot div quot            controlElement className    quot gifcontrol loading g quot  e           supergif load  function controlElement                controlElement className    quot gifcontrol paused quot               var playing   false              controlElement addEventListener  quot click quot   function                    if playing                        this pause                        playing   false                      controlElement className    quot gifcontrol paused quot                     else                       this play                        playing   true                      controlElement className    quot gifcontrol playing quot                                   bind this  controlElement                       bind supergif   controlElement                 var canvas   supergif get canvas                 controlElement style width   canvas width  quot px quot           controlElement style height   canvas height  quot px quot       controlElement style left   canvas offsetLeft  quot px quot           var containerElement   canvas parentNode          containerElement appendChild controlElement               lt  script gt    lt  body gt   lt  html gt   When I put the page on my website and displayed it  the top looked like this   And when I pressed the pink button  the page changed to this  and the GIF started animating   The cat laps water falling from a tap    To end  here s the second  simple  page  Unlike the first  this doesn t have a fancy Play Pause control that changes shape  it just has two buttons  The only thing the code does that isn t essential is to disable whichever button is not relevant  and to insert some space between the buttons   lt html gt    lt head gt   lt script src  quot libgif-js-master libgif js quot  gt  lt  script gt   lt  head gt    lt body gt    lt button type  quot button quot  onclick  quot play   quot          id  quot play button quot          style  quot margin-right 9px  quot   gt  Play  lt  button gt          lt button type  quot button quot  onclick  quot pause   quot          id  quot pause button quot   gt  Pause  lt  button gt    lt img src  quot https   media giphy com media Byana3FscAMGQ giphy gif quot        id  quot gif quot     gt    lt script gt  var gif element   document getElementById   quot gif quot          var supergif   new SuperGif                 gif  gif element                            progressbar height  0                            auto play  false                      supergif load     function play       var play button   document getElementById   quot play button quot       play button disabled   true     var pause button   document getElementById   quot pause button quot       pause button disabled   false      supergif play       function pause       var play button   document getElementById   quot play button quot       play button disabled   false     var pause button   document getElementById   quot pause button quot       pause button disabled   true     supergif pause       pause button disabled   true   lt  script gt    lt  body gt   lt  html gt   This  plus the example html file in libgif-js  should be enough to get anyone started

User · Answer

Related answer  you can specify the number of playbacks on a gif  The below gif has 3 playbacks associated with it  10 second timer  30 second playback total   After 30 seconds have passed since page load  it stops at  0 01    Refresh the page to restart all 3 playbacks  You have to modify the gif itself  An easy tool is found here for modifying GIF playbacks https   ezgif com loop-count   To see an example of a single-loop playback gif in action on a landing page  checkout this site using a single playback gif https   git-lfs github com

User · Answer

No  you can t control the animation of the images   You would need two versions of each image  one that is animated  and one that s not  On hover you can easily change from one image to another   Example     function         img   each function e       var src     e  attr  src          e  hover function            this  attr  src   src replace   gif     anim gif            function            this  attr  src   src                       Update   Time goes by  and possibilities change  As kritzikatzi pointed out  having two versions of the image is not the only option  you can apparently use a canvas element to create a copy of the first frame of the animation  Note that this doesn t work in all browsers  IE 8 for example doesn t support the canvas element

User · Answer

found a working solution here  https   codepen io hoanghals pen dZrWLZ  JS here   var gifElements   document querySelectorAll  img gif     for var e in gifElements     var element   gifElements e    if element nodeName     IMG          var supergif   new SuperGif           gif  element          progressbar height  0          auto play  false               var controlElement   document createElement  div        controlElement className    gifcontrol loading g  e       supergif load  function controlElement            controlElement className    gifcontrol paused           var playing   false          controlElement addEventListener  click   function                if playing                    this pause                    playing   false                  controlElement className    gifcontrol paused                 else                   this play                    playing   true                  controlElement className    gifcontrol playing                           bind this  controlElement           bind supergif   controlElement         var canvas   supergif get canvas             controlElement style width   canvas width  px       controlElement style height   canvas height  px   controlElement style left   canvas offsetLeft  px       var containerElement   canvas parentNode      containerElement appendChild controlElement

User · Answer

I think the jQuery plugin freezeframe js might come in handy for you  freezeframe js is a jQuery Plugin To Automatically Pause GIFs And Restart Animating On Mouse Hover   I guess you can easily adapt it to make it work on page load instead

User · Answer

A more elegant version of Mark Kramer s would be to do the following   function animateImg id  gifSrc     var  el     id       staticSrc    el attr  src       el hover      function            this  attr  src   gifSrc              function            this  attr  src   staticSrc                document  ready function      animateImg   id1    gif gif1 gif      animateImg   id2    gif gif2 gif          Or even better would be to use data attributes     document  ready function          animated-img   each function        var  el     this         staticSrc    el attr  src          gifSrc    el data  gifSrc         el hover        function              this  attr  src   gifSrc                  function              this  attr  src   staticSrc                         And the img el would look something like    lt img class  animated-img  src      img jpg  data-gif-src      gif gif    gt    Note  This code is untested but should work fine

User · Answer

There is only one way from what I am aware    Have 2 images  first a jpeg with first frame or whatever you want  of the gif and the actual gif    Load the page with the jpeg in place and on mouse over replace the jpeg with the gif  You can preload the gifs if you want or if they are of big size show a loading while the gif is loading and then replace the jpeg with it   If you whant it to bi linear as in have the gif play on mouse over  stop it on mouse out and then resume play from the frame you stopped  then this cannot be done with javascript gif combo

User · Answer

I realise this answer is late  but I found a rather simple  elegant  and effective solution to this problem and felt it necessary to post it here   However one thing I feel I need to make clear is that this doesn t start gif animation on mouseover  pause it on mouseout  and continue it when you mouseover it again  That  unfortunately  is impossible to do with gifs   It is possible to do with a string of images displayed one after another to look like a gif  but taking apart every frame of your gifs and copying all those urls into a script would be time consuming   What my solution does is make an image looks like it starts moving on mouseover  You make the first frame of your gif an image and put that image on the webpage then replace the image with the gif on mouseover and it looks like it starts moving  It resets on mouseout   Just insert this script in the head section of your HTML     document  ready function             imgAnimate   hover          function                           this  attr  src    GIF URL HERE                       function                           this  attr  src    STATIC IMAGE URL HERE                      And put this code in the img tag of the image you want to animate   id  imgAnimate    This will load the gif on mouseover  so it will seem like your image starts moving   This is better than loading the gif onload because then the transition from static image to gif is choppy because the gif will start on a random frame   for more than one image just recreate the script create a function         lt script type  text javascript  gt   var staticGifSuffix    -static gif   var gifSuffix     gif      document  ready function            img-animate   each function              this  hover          function                         var originalSrc     this  attr  src                  this  attr  src   originalSrc replace staticGifSuffix  gifSuffix                       function                         var originalSrc     this  attr  src                  this  attr  src   originalSrc replace gifSuffix  staticGifSuffix                                     lt  script gt    lt  head gt   lt body gt    lt img class  img-animate  src  example-static gif   gt   lt img class  img-animate  src  example-static gif   gt   lt img class  img-animate  src  example-static gif   gt   lt img class  img-animate  src  example-static gif   gt   lt img class  img-animate  src  example-static gif   gt    lt  body gt    That code block is a functioning web page  based on the information you have given me  that will display the static images and on hover  load and display the gif s  All you have to do is insert the url s for the static images

User · Answer

css filter can stop gif from playing in chrome just add filter  blur 0 001px    to your img tag then gif freezed to load via chrome performance concern

User · Answer

You can solve this by having a long stripe that you show in steps  like a filmstrip  Then you can stop the film on any frame  Example below  fiddle available at http   jsfiddle net HPXq4 9     the markup     lt div class  thumbnail-wrapper  gt        lt img src  blah jpg  gt    lt  div gt    the css    thumbnail-wrapper     width 190px     height 100px     overflow hidden     position absolute     thumbnail-wrapper img     position relative     top 0      the js   var gifTimer  var currentGifId null  var step   100    height of a thumbnail     thumbnail-wrapper img   hover     function          currentGifId     this        gifTimer   setInterval playGif 500            function           clearInterval gifTimer          currentGifId null           var playGif   function       var top   parseInt currentGifId css  top   -step     var max   currentGifId height       console log top max     if max top lt  0        console log  reset        top 0          currentGifId css  top  top       obviously  this can be optimized much further  but I simplified this example for readability

User · Answer

Adding a suffix like this         img gif   attr  src   file gif     Math random         the browser is compelled to download a new image every time the user accesses the page  Moreover the client cache may be quickly filled     Here follows the alternative solution I tested on Chrome 49 and Firefox 45  In the css stylesheet set the display property as  none   like this     img gif    display  none       Outside the    document  ready  statement insert       window  load function        img gif   show           Every time the user accesses the page  the animation will be started after the complete load of all the elements  This is the only way I found to sincronize gif and html5 animations     Please note that  The gif animation will not restart after refreshing the page  like pressing  F5    The    document  ready  statement doesn t produce the same effect of    window  load   The property  visibility  doesn t produce the same effect of  display

User · Answer

The best option is probably to have a still image which you replace the gif with when you want to stop it    lt img src  gif 1303552574110 1 gif  alt    class  anim   gt   lt img src  gif 1302919192204 gif  alt    class  anim   gt   lt img src  gif 1303642234740 gif  alt    class  anim   gt   lt img src  gif 1303822879528 gif  alt    class  anim   gt   lt img src  gif 1303825584512 gif  alt    class  anim   gt     window  load function           anim   src  stillimage gif             anim   mouseover function       this  src  animatedimage gif             anim   mouseout function       this  src  stillimage gif          You probably want to have two arrays containing paths to the still and animated gifs which you can assign to each image

User · Answer

For restarting the animation of a gif image  you can use the code       img gif   attr  src   file gif     Math random

[jquery] Stop a gif animation onload, on mouseover start the activation

Examples related to jquery

Examples related to gif