Presented at Seattle ID
Frame Animationin the BrowserSeattle Interactive Developers / August 15, 2012
View Slide
Matt FordhamTechnical Director / WINTRwww.wintr.com
Animated GIFsMulti-image SequencesSprite Sequences
Animated GIFsConsLack of controlGIF transparencyGIF artifactsProsEasy to createEasy to implementMinimal requirements
Animated GIFsConsider for...Looping animationsSmall detailsLow-tech contexts (HTML emails)Make ‘em with...Photoshop
Multi-image SequencesConsLots of image requestsLots of DOM elementsProsAny image typeGood for larger images
Multi-image SequencesConsider for...Larger/longer animationsMulti-stage animationsMake ‘em with...After Effects / 3D / PhotoshopJavascript
Sprite SequencesConsNot great for large imagesProsOnly one image requestOnly one DOM element
Sprite SequencesConsider for...Smaller/shorter animationsButton rolloversMake ‘em with...After Effects / 3D / PhotoshopJavascript
jquery.frameSequencer.jshttps://github.com/mattfordham/Frame-Sequencer
Other Useful Toolshttps://github.com/jakesgordon/sprite-factoryhttp://imageoptim.comhttp://www.codingmammoth.com/quickscale.phphttp://manytricks.com/namemangler
Thanks :)@mattfordhamwww.wintr.comwww.matthewfordham.com/blog