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
320
Automating EE Bootstrapping and Deployment
mattfordham
3
170
Automating EE Bootstrapping and Deployment
mattfordham
2
230
Other Decks in Programming
See All in Programming
PHP で学ぶ OAuth 入門
azuki
1
210
State of Namespace
tagomoris
4
2k
MCP調べてみました! / Exploring MCP
uhzz
2
2.3k
Compose Hot Reload is here, stop re-launching your apps! (Android Makers 2025)
zsmb
1
550
エンジニアが挑む、限界までの越境
nealle
1
280
大LLM時代にこの先生きのこるには-ITエンジニア編
fumiyakume
7
3.1k
The Evolution of the CRuby Build System
kateinoigakukun
0
720
実践Webフロントパフォーマンスチューニング
cp20
33
7.6k
Orleans + Sekiban + SignalR でリアルタイムWeb作ってみた
tomohisa
0
130
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.5k
generative-ai-use-cases(GenU)の推しポイント ~2025年4月版~
hideg
1
300
Bedrock×MCPで社内ブログ執筆文化を育てたい!
har1101
6
1.1k
Featured
See All Featured
The Art of Programming - Codeland 2020
erikaheidi
53
13k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Being A Developer After 40
akosma
91
590k
Faster Mobile Websites
deanohume
306
31k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
45
9.5k
Build your cross-platform service in a week with App Engine
jlugia
230
18k
A better future with KSS
kneath
239
17k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
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