Frame Animation in the Browser

Presented at Seattle ID

Transcript

1. Frame Animation
   in the Browser
   Seattle Interactive Developers / August 15, 2012
   

   View Slide

2. Matt Fordham
   Technical Director / WINTR
   www.wintr.com
   

   View Slide

3. View Slide

4. Animated GIFs
   Multi-image Sequences
   Sprite Sequences
   

   View Slide

5. Animated GIFs
   Cons
   Lack of control
   GIF transparency
   GIF artifacts
   Pros
   Easy to create
   Easy to implement
   Minimal requirements
   

   View Slide

6. Animated GIFs
   Cons
   Lack of control
   GIF transparency
   GIF artifacts
   Pros
   Easy to create
   Easy to implement
   Minimal requirements
   

   View Slide

7. Animated GIFs
   Consider for...
   Looping animations
   Small details
   Low-tech contexts (HTML emails)
   Make ‘em with...
   Photoshop
   

   View Slide

8. Multi-image Sequences
   Cons
   Lots of image requests
   Lots of DOM elements
   Pros
   Any image type
   Good for larger images
   

   View Slide

9. Multi-image Sequences
   Consider for...
   Larger/longer animations
   Multi-stage animations
   Make ‘em with...
   After Effects / 3D / Photoshop
   Javascript
   

   View Slide

10. Sprite Sequences
    Cons
    Not great for large images
    Pros
    Only one image request
    Only one DOM element
    

    View Slide

11. Sprite Sequences
    Consider for...
    Smaller/shorter animations
    Button rollovers
    Make ‘em with...
    After Effects / 3D / Photoshop
    Javascript
    

    View Slide

12. jquery.frameSequencer.js
    https://github.com/mattfordham/Frame-Sequencer
    

    View Slide

13. Other Useful Tools
    https://github.com/jakesgordon/sprite-factory
    http://imageoptim.com
    http://www.codingmammoth.com/quickscale.php
    http://manytricks.com/namemangler
    

    View Slide

14. Thanks :)
    @mattfordham
    www.wintr.com
    www.matthewfordham.com/blog
    

    View Slide