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
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
140
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
Gleamという選択肢
comamoca
6
760
Beyond Portability: Live Migration for Evolving WebAssembly Workloads
chikuwait
0
390
XSLTで作るBrainfuck処理系
makki_d
0
210
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
310
レガシーシステムの機能調査・開発におけるAI利活用
takuya_ohtonari
0
610
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
210
Is Xcode slowly dying out in 2025?
uetyo
1
190
A2A プロトコルを試してみる
azukiazusa1
2
1.1k
技術同人誌をMCP Serverにしてみた
74th
0
280
Featured
See All Featured
How STYLIGHT went responsive
nonsquared
100
5.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Speed Design
sergeychernyshev
32
1k
Typedesign – Prime Four
hannesfritz
42
2.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Faster Mobile Websites
deanohume
307
31k
Done Done
chrislema
184
16k
Six Lessons from altMBA
skipperchong
28
3.8k
Thoughts on Productivity
jonyablonski
69
4.7k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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