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
3.1k
Confessions of an Apprehensive Technical Director
mattfordham
11
330
Automating EE Bootstrapping and Deployment
mattfordham
3
180
Automating EE Bootstrapping and Deployment
mattfordham
2
230
Other Decks in Programming
See All in Programming
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
Ruby Parser progress report 2025
yui_knk
1
440
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
230
Testing Trophyは叫ばない
toms74209200
0
880
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
130
今から始めるClaude Code入門〜AIコーディングエージェントの歴史と導入〜
nokomoro3
0
180
概念モデル→論理モデルで気をつけていること
sunnyone
2
230
Navigating Dependency Injection with Metro
zacsweers
3
960
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
120
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
Navigation 2 を 3 に移行する(予定)ためにやったこと
yokomii
0
270
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
310
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Balancing Empowerment & Direction
lara
3
620
Typedesign – Prime Four
hannesfritz
42
2.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
The Cult of Friendly URLs
andyhume
79
6.6k
The Language of Interfaces
destraynor
161
25k
The Pragmatic Product Professional
lauravandoore
36
6.9k
Navigating Team Friction
lara
189
15k
For a Future-Friendly Web
brad_frost
180
9.9k
4 Signs Your Business is Dying
shpigford
184
22k
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