Can you control GIF animation with Javascript?

by

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="https://stackoverflow.com/questions/2385203/./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)

More Related Contents:

  1. Change Background Color & Font Color Automatically Via CSS [closed]
  2. How to fade animate background images (full size) [closed]
  3. How to pause and resume CSS3 animation using JavaScript?
  4. How do I re-trigger a WebKit CSS animation via JavaScript?
  5. How to build simple jQuery image slider with sliding or opacity effect?
  6. CSS3-Animate elements if visible in viewport (Page Scroll)
  7. Performance of CSS Transitions vs. JS animation packages
  8. Restart an animated GIF from JavaScript without reloading the image
  9. How do you detect when CSS animations start and end with JavaScript?
  10. CSS Animation onClick
  11. AngularJS css animation + done callback
  12. Pausing CSS animation with javascript and also jumping to a specific place in the animation
  13. visibility:hidden vs display:none vs opacity:0
  14. Preserve browser window aspect ratio while shrinking [closed]
  15. How can i create html automatic change page? [duplicate]
  16. Can jQuery get all CSS styles associated with an element?
  17. Set CSS property in JavaScript?
  18. How to use CSS (and JavaScript?) to create a blurred, “frosted” background?
  19. Google Maps: How to create a custom InfoWindow?
  20. Cannot access cssRules from local css file in Chrome 64
  21. “Scroll” to the very right of a long text input
  22. How to use javascript conditionally like CSS3 media queries, orientation?
  23. How to create a responsive image that also scales up in Bootstrap 3
  24. How to detect CSS3 resize events
  25. Can I use webpack to generate CSS and JS separately?
  26. How to check if css value is supported by the browser?
  27. How do I make a move up and down when I’m scrolling the page?
  28. CSS transitions do not work when assigned trough JavaScript
  29. Hide div element when screen size is smaller than a specific size
  30. Bootstrap Dropdown menu is not working

Leave a Comment