Frame Animation in the Browser

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Matt Fordham Technical Director / WINTR www.wintr.com

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Animated GIFs Multi-image Sequences Sprite Sequences

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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