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
200
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
2.9k
Confessions of an Apprehensive Technical Director
mattfordham
11
300
Automating EE Bootstrapping and Deployment
mattfordham
3
160
Automating EE Bootstrapping and Deployment
mattfordham
2
220
Other Decks in Programming
See All in Programming
SDCon2024: Enabling DevOps and Team Topologies thru architecture: architecting for fast flow
cer
PRO
0
780
今こそ始める、CDKコンストラクトライブラリ開発 ― 入門から実践まで
tmokmss
1
930
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
CSC307 Lecture 14
javiergs
PRO
0
220
12年前の『型システム入門』翻訳の思い出話
mame
11
1.2k
I/O Extended Android in Korea 2024 ~ Whats new in Android development tools
pluu
0
250
君たちはどうコードをレビューする (される) か / 大吉祥寺.pm
utgwkk
15
8.5k
Harnessing Large Language Models for Training-free Video Anomaly Detection
tereka114
1
1.3k
Product Management LT会_クアンド新家
shinshin
0
210
入社1ヶ月でここまでやった!Findy Toolsインフラ支援の最適化
rvirus0817
6
1.4k
CSC307 Lecture 11
javiergs
PRO
0
240
Ruby メモリ管理 プログラミング
megmogmog1965
0
130
Featured
See All Featured
Embracing the Ebb and Flow
colly
81
4.3k
Speed Design
sergeychernyshev
9
270
From Idea to $5000 a Month in 5 Months
shpigford
377
46k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Infographics Made Easy
chrislema
238
18k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
RailsConf 2023
tenderlove
16
720
10 Git Anti Patterns You Should be Aware of
lemiorhan
652
58k
Web development in the modern age
philhawksworth
203
10k
Code Review Best Practice
trishagee
58
16k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Building an army of robots
kneath
301
42k
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