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
170
Automating EE Bootstrapping and Deployment
mattfordham
2
230
Other Decks in Programming
See All in Programming
オープンセミナー2025@広島「君はどこで動かすか?」アンケート結果
satoshi256kbyte
0
230
AIコーディングAgentとの向き合い方
eycjur
0
250
ソフトウェアテスト徹底指南書の紹介
goyoki
1
130
機能追加とリーダー業務の類似性
rinchoku
0
180
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
390
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.4k
Portapad紹介プレゼンテーション
gotoumakakeru
1
130
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
230
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
260
Ruby Parser progress report 2025
yui_knk
1
260
DockerからECSへ 〜 AWSの海に出る前に知っておきたいこと 〜
ota1022
5
1.9k
AWS発のAIエディタKiroを使ってみた
iriikeita
1
140
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
36
6.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.5k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Docker and Python
trallard
45
3.5k
Practical Orchestrator
shlominoach
190
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing for Performance
lara
610
69k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
How to Think Like a Performance Engineer
csswizardry
26
1.9k
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