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
310
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のバージョンアップ時にも役立ったAST
matsuo_atsushi
0
230
GoとPHPのインターフェイスの違い
shimabox
2
210
TCAを用いたAmebaのリアーキテクチャ
dazy
0
200
DRFを少しずつ オニオンアーキテクチャに寄せていく DjangoCongress JP 2025
nealle
2
280
Domain-Driven Design (Tutorial)
hschwentner
13
22k
データベースのオペレーターであるCloudNativePGがStatefulSetを使わない理由に迫る
nnaka2992
0
240
Honoとフロントエンドの 型安全性について
yodaka
7
1.5k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
Djangoにおける複数ユーザー種別認証の設計アプローチ@DjangoCongress JP 2025
delhi09
PRO
4
490
パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い
kuralab
3
910
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
1
210
CDKを使ったPagerDuty連携インフラのテンプレート化
shibuya_shogo
0
110
Featured
See All Featured
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
650
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Building an army of robots
kneath
303
45k
Rebuilding a faster, lazier Slack
samanthasiow
80
8.9k
Music & Morning Musume
bryan
46
6.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
520
Become a Pro
speakerdeck
PRO
26
5.2k
Faster Mobile Websites
deanohume
306
31k
Designing Experiences People Love
moore
140
23k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
How to Ace a Technical Interview
jacobian
276
23k
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