Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Frame Animation in the Browser
Search
mattfordham
August 15, 2012
Programming
2
210
Frame Animation in the Browser
Presented at Seattle ID
mattfordham
August 15, 2012
Tweet
Share
More Decks by mattfordham
See All by mattfordham
Styleguide Driven Development
mattfordham
13
3k
Confessions of an Apprehensive Technical Director
mattfordham
11
310
Automating EE Bootstrapping and Deployment
mattfordham
3
170
Automating EE Bootstrapping and Deployment
mattfordham
2
230
Other Decks in Programming
See All in Programming
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
Ruby on cygwin 2025-02
fd0
0
140
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
知られざるDMMデータエンジニアの生態 〜かつてツチノコと呼ばれし者〜
takaha4k
4
1.3k
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
100
AHC041解説
terryu16
0
590
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
29
11k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
890
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
テストをしないQAエンジニアは何をしているか?
nealle
0
130
Writing documentation can be fun with plugin system
okuramasafumi
0
120
Linux && Docker 研修/Linux && Docker training
forrep
23
4.5k
Featured
See All Featured
Become a Pro
speakerdeck
PRO
26
5.1k
Java REST API Framework Comparison - PWX 2021
mraible
28
8.4k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
It's Worth the Effort
3n
184
28k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Unsuck your backbone
ammeep
669
57k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Six Lessons from altMBA
skipperchong
27
3.6k
Designing for Performance
lara
604
68k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Transcript
Frame Animation in the Browser Seattle Interactive Developers / August
15, 2012
Matt Fordham Technical Director / WINTR www.wintr.com
None
Animated GIFs Multi-image Sequences Sprite Sequences
Animated GIFs Cons Lack of control GIF transparency GIF artifacts
Pros Easy to create Easy to implement Minimal requirements
Animated GIFs Cons Lack of control GIF transparency GIF artifacts
Pros Easy to create Easy to implement Minimal requirements
Animated GIFs Consider for... Looping animations Small details Low-tech contexts
(HTML emails) Make ‘em with... Photoshop
Multi-image Sequences Cons Lots of image requests Lots of DOM
elements Pros Any image type Good for larger images
Multi-image Sequences Consider for... Larger/longer animations Multi-stage animations Make ‘em
with... After Effects / 3D / Photoshop Javascript
Sprite Sequences Cons Not great for large images Pros Only
one image request Only one DOM element
Sprite Sequences Consider for... Smaller/shorter animations Button rollovers Make ‘em
with... After Effects / 3D / Photoshop Javascript
jquery.frameSequencer.js https://github.com/mattfordham/Frame-Sequencer
Other Useful Tools https://github.com/jakesgordon/sprite-factory http://imageoptim.com http://www.codingmammoth.com/quickscale.php http://manytricks.com/namemangler
Thanks :) @mattfordham www.wintr.com www.matthewfordham.com/blog