Can you control GIF animation with Javascript?

javascript css animation gif animated-gif
Logan picture Logan · Mar 5, 2010 · Viewed 90.1k times · Source

Is it possible to use javascript to control which frame of a GIF image is showing and/or stop the animation. I want to be able to load a GIF with several frames and only show one of them.

I know I could do it with lots of separate images, but if I can do what I want with a GIF, it will only be one file to worry about.

Answer

Charlotte picture Charlotte · May 15, 2013

You can use the libgif library.

It allows you to start/stop the gif and control which frame the gif is on.

<script type="text/javascript" src="./libgif.js"></script>
<img src="./example1_preview.gif" rel:animated_src="./example1.gif"
 width="360" height="360" rel:auto_play="1" rel:rubbable="1" />

<script type="text/javascript">
    $$('img').each(function (img_tag) {
        if (/.*\.gif/.test(img_tag.src)) {
            var rub = new SuperGif({ gif: img_tag } );
            rub.load(function(){
                console.log('oh hey, now the gif is loaded');
            });
        }
    });
</script>

(most of the code is taken directly from their example)

Related questions

CSS Animation onClick

How can I get a CSS Animation to play with a JavaScript onClick? I currently have: .classname { -webkit-animation-name: cssAnimation; -webkit-animation-duration:3s; -webkit-animation-iteration-count: 1; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: forwards; } @-webkit-keyframes cssAnimation { from { -webkit-transform: rotate(0deg) scale(1) skew(0deg) translate(100px); } to { -webkit-transform: rotate(0…

Read More
jQuery css Visibility with animation

I have few div's placed underneath each other and I'm using css visibility to fade them in and out. The reason why I use visibility is so that the div's don't move place. For fade In I'm using: $('.drop1…

Read More
How to build simple jQuery image slider with sliding or opacity effect?

Some of us might not want to use ready plugins because of their high sizes and possibilty of creating conflicts with current javascript. I was using light slider plugins before but when customer gives modular revise, it became really hard …

Read More