Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Frame Animation in the Browser

Frame Animation in the Browser

Presented at Seattle ID

mattfordham

August 15, 2012
Tweet

More Decks by mattfordham

Other Decks in Programming

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